Блог

Я только начал изучать VUE.Js и хотите отключить кнопку отправки до тех пор, пока форма не будет заполнена должным образом. Вот мой код

Я пытаюсь использовать вычисляемую здесь функцию IsComplete (), чтобы убедиться, что кнопка отключена до тех пор, пока она не будет правильно заполнена

Обязательными полями являются

1. Дата рождения 2.Фамилия 3.Почтовый индекс

Спасибо

 lt;form id="Retrieve" method="post" action="@Url.Action("QuoteForm", "Quote")" v-on:submit="validateForm"gt;       lt;p asp-validation-for="Surname" v-cloak class="errormessage"gt;@Html.ValidationMessage("surname")lt;/pgt;  lt;div v-cloak v-bind:class=" $v.surname.$error ? 'd-block' : 'd-none'"gt;  lt;p class="errormessage" v-cloak v-bind:class="!$v.surname.alpha_dash_quote ? 'd-block' : 'd-none' "gt;lt;i aria-hidden="true" class="fas fa-exclamation pe-1"gt;lt;/igt;Please provide a valid surname.lt;/pgt;  lt;p class="errormessage" v-cloak v-bind:class="!$v.surname.required ? 'd-block' : 'd-none' "gt;lt;i aria-hidden="true" class="fas fa-exclamation pe-1"gt;lt;/igt;Please provide your surname.lt;/pgt;  lt;/divgt;  lt;label asp-for="Surname"gt;Surname:lt;/labelgt;  lt;input type="text" name="surname" value="@Model.Surname" class="bottom20" v-model="$v.surname.$model" asp-for="Surname"/gt;   lt;p asp-validation-for="DateOfBirth" v-cloak class="errormessage"gt;@Html.ValidationMessage("DateOfBirth")lt;/pgt;  lt;div v-cloak v-bind:class="$v.dateOfBirth.$error ? 'd-block' : 'd-none'"gt;  lt;p class="errormessage" v-cloak v-bind:class="!$v.dateOfBirth.isDateValid ? 'd-block' : 'd-none' "gt;lt;i aria-hidden="true" class="fas fa-exclamation pe-1"gt;lt;/igt;Please enter a valid date of birth in the format of DD/MM/YYYY.lt;/pgt;   lt;p class="errormessage" v-cloak v-bind:class="!$v.dateOfBirth.required ? 'd-block' : 'd-none' "gt;lt;i aria-hidden="true" class="fas fa-exclamation pe-1"gt;lt;/igt;Please provide your date of birth.lt;/pgt;  lt;/divgt;  lt;label asp-for="DateOfBirth"gt;Date of birth:lt;/labelgt;  lt;input name="day" v-on:change="updatePolicyHolderDOB($event)" v-model="dateOfBirthDay" type="number" class="dobfield bottom20" maxlength="2" /gt;  lt;input name="month" v-on:change="updatePolicyHolderDOB($event)" v-model="dateOfBirthMonth" type="number" class="dobfield bottom20" maxlength="2" /gt;  lt;input name="year" v-on:change="updatePolicyHolderDOB($event)" v-model="dateOfBirthYear" type="number" class="dobfieldyear bottom20" maxlength="4" /gt;  lt;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" /gt;   lt;p asp-validation-for="PostCode" v-cloak class="errormessage"gt;@Html.ValidationMessage("PostCode")lt;/pgt;   lt;div v-cloak v-bind:class="$v.postcode.$error ? 'd-block' : 'd-none'"gt;  lt;p class="errormessage" v-cloak v-bind:class="!$v.postcode.required ? 'd-block' : 'd-none' "gt;lt;i aria-hidden="true" class="fas fa-exclamation pe-1"gt;lt;/igt;Please provide your postcode.lt;/pgt;  lt;p class="errormessage" v-cloak v-bind:class="!$v.postcode.isInvalidPostcode ? 'd-block' : 'd-none' "gt;lt;i aria-hidden="true" class="fas fa-exclamation pe-1"gt;lt;/igt;Please provide a valid postcode.lt;/pgt;  lt;/divgt;  lt;label for="Postcode"gt;Postcode:lt;/labelgt;  lt;input name="postcode" ref="buildingDetailsPostcode" v-model.trim="$v.postcode.$model" type="text" class="bottom20" style="text-transform: uppercase;" /gt; lt;/divgt; lt;button class="ctaBtn_Start" type="submit" v-bind:class="{ 'disabled' : $v.$invalid || !isComplete}"gt; Retrieve Quote lt;/buttongt;  

и вот мой vue.js

 lt;script type="text/javascript"gt;  $(function () {  // removed unecessary data  }  var vm = new Vue({  el: '#Retrieve',  mixins: [vueMixins],  data: {    dateOfBirth: '@(Model.DateOfBirthgt;DateTime.MinValue?Model.DateOfBirth.ToString("d"):"")',  dateOfBirthDay : '@(Model.DateOfBirthgt;DateTime.MinValue?Model.DateOfBirth.ToString("dd"):"")',  dateOfBirthMonth : '@(Model.DateOfBirthgt;DateTime.MinValue?Model.DateOfBirth.ToString("MM"):"")',  dateOfBirthYear : '@(Model.DateOfBirthgt;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 amp;amp; this.dateOfBirth amp;amp; this.postcode;  }  },  postcode: {  required: required,  isInvalidPostcode: isInvalidPostcode  }  },  methods:{  xxx: function (e) {  this.dateOfBirth = this.dateOfBirthDay   '/'   this.dateOfBirthMonth   '/'   this.dateOfBirthYear;  },  }  });  });