0

我刚开始学习 VUE.Js，想禁用提交按钮，直到正确填写表单。这是我的代码

我试图在这里使用计算函数 isComplete() 来确保按钮在正确填写之前被禁用

必填字段是

  1. dateOfBirth 2.Surname 3.PostCode

谢谢你

<form id="Retrieve" method="post" action="@Url.Action("QuoteForm", "Quote")" v-on:submit="validateForm">


  

    <p asp-validation-for="Surname" v-cloak class="errormessage">@Html.ValidationMessage("surname")</p>
    <div v-cloak v-bind:class=" $v.surname.$error ? 'd-block' : 'd-none'">
        <p class="errormessage" v-cloak v-bind:class="!$v.surname.alpha_dash_quote ? 'd-block' : 'd-none' "><i aria-hidden="true" class="fas fa-exclamation pe-1"></i>Please provide a valid surname.</p>
        <p class="errormessage" v-cloak v-bind:class="!$v.surname.required ? 'd-block' : 'd-none' "><i aria-hidden="true" class="fas fa-exclamation pe-1"></i>Please provide your surname.</p>
    </div>
    <label asp-for="Surname">Surname:</label>
    <input type="text" name="surname" value="@Model.Surname" class="bottom20" v-model="$v.surname.$model" asp-for="Surname"/>

    <p asp-validation-for="DateOfBirth" v-cloak class="errormessage">@Html.ValidationMessage("DateOfBirth")</p>
    <div v-cloak v-bind:class="$v.dateOfBirth.$error ? 'd-block' : 'd-none'">
        <p class="errormessage" v-cloak v-bind:class="!$v.dateOfBirth.isDateValid ? 'd-block' : 'd-none' "><i aria-hidden="true" class="fas fa-exclamation pe-1"></i>Please enter a valid date of birth in the format of DD/MM/YYYY.</p>             
        <p class="errormessage" v-cloak v-bind:class="!$v.dateOfBirth.required ? 'd-block' : 'd-none' "><i aria-hidden="true" class="fas fa-exclamation pe-1"></i>Please provide your date of birth.</p>
    </div>
    <label asp-for="DateOfBirth">Date of birth:</label>
    <input name="day" v-on:change="updatePolicyHolderDOB($event)" v-model="dateOfBirthDay"  type="number" class="dobfield bottom20" maxlength="2" />
    <input name="month" v-on:change="updatePolicyHolderDOB($event)" v-model="dateOfBirthMonth"  type="number" class="dobfield bottom20" maxlength="2" />
    <input name="year" v-on:change="updatePolicyHolderDOB($event)" v-model="dateOfBirthYear"  type="number" class="dobfieldyear bottom20" maxlength="4" />
    <input type="hidden" id="dob" asp-for="DateOfBirth" name="dateOfBirth" placeholder="DD/MM/YYYY" data-type="datepicker-dob" data-vue-data="dateOfBirth" v-model="$v.dateOfBirth.$model" />

    <p asp-validation-for="PostCode" v-cloak class="errormessage">@Html.ValidationMessage("PostCode")</p> 
    <div v-cloak v-bind:class="$v.postcode.$error ? 'd-block' : 'd-none'">
        <p class="errormessage" v-cloak v-bind:class="!$v.postcode.required ? 'd-block' : 'd-none' "><i aria-hidden="true" class="fas fa-exclamation pe-1"></i>Please provide your postcode.</p>
        <p class="errormessage" v-cloak v-bind:class="!$v.postcode.isInvalidPostcode ? 'd-block' : 'd-none' "><i aria-hidden="true" class="fas fa-exclamation pe-1"></i>Please provide a valid postcode.</p>
    </div>
    <label for="Postcode">Postcode:</label>
    <input name="postcode" ref="buildingDetailsPostcode" v-model.trim="$v.postcode.$model" type="text" class="bottom20" style="text-transform: uppercase;" />
</div>
<button class="ctaBtn_Start" type="submit" v-bind:class="{ 'disabled' : $v.$invalid || !isComplete}"> Retrieve Quote </button>

这是我的 vue.js

 <script type="text/javascript">
    $(function () {
       // removed unecessary data
            }
        var vm = new Vue({
            el: '#Retrieve',
            mixins: [vueMixins],
            data: {
              
                dateOfBirth: '@(Model.DateOfBirth>DateTime.MinValue?Model.DateOfBirth.ToString("d"):"")',
                dateOfBirthDay : '@(Model.DateOfBirth>DateTime.MinValue?Model.DateOfBirth.ToString("dd"):"")',
                dateOfBirthMonth : '@(Model.DateOfBirth>DateTime.MinValue?Model.DateOfBirth.ToString("MM"):"")',
                dateOfBirthYear : '@(Model.DateOfBirth>DateTime.MinValue?Model.DateOfBirth.ToString("yyy"):"")',
                dateOfBirthErrors: '@(ViewData.ModelState["dateOfBirth"]?.Errors.Any())',
                surname: '@Model.Surname',
                surnameErrors: '@(ViewData.ModelState["surname"]?.Errors.Any())',
                postcode: '@Model.Postcode',
                postcodeErrors: '@(ViewData.ModelState["postcode"]?.Errors.Any())'
            },
            validations: {
                quoteReference: {
                    required: required
                },
                surname: {
                    required: required,
                    alpha_dash_quote: alpha_dash_quote
                },
                dateOfBirth: {
                    required: required,
                    isDateValid: function (value) {
                        var momentDate = moment.parseZone(value, 'DD/MM/YYYY', true);
                        if (!helpers.req(value)) return true;
                        return momentDate.isValid();
                    }
                },
                computed: {
                    isComplete() {
                        return this.surname && this.dateOfBirth && this.postcode;
                    }
                },
                postcode: {
                    required: required,
                    isInvalidPostcode: isInvalidPostcode
                }
            },
            methods:{
                xxx: function (e) {
                    this.dateOfBirth = this.dateOfBirthDay + '/' + this.dateOfBirthMonth + '/' + this.dateOfBirthYear;
                },
            }
        });
    });
4

0 回答 0