Есть ли простой способ инициировать проверку формы на SubSmit вместо OnLoad с помощью начальной загрузки и Vue.Js? - PullRequest
Новая
       41

Есть ли простой способ инициировать проверку формы на SubSmit вместо OnLoad с помощью начальной загрузки и Vue.Js?

0 голосов
/ 12 октября 2018

У меня есть форма для сброса пароля, которая, конечно, изначально пуста, и я хочу при подтверждении подтвердить, что ни одно из полей не является пустым.Я делаю следующее для каждого поля: 

    <b-form-group id="currentPassword" 
              label="Old password"
              :invalid-feedback="oldPasswordFeedback">
        <b-form-input id="password" 
                      v-model="passwords.currentPassword" 
                      placeholder="Enter your old Password" 
                      type="password"  
                      maxlength="60" 
                      required/>
    </b-form-group>

и форма определяется следующим образом: 

  <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid">

Проблема в том, что всякий раз, когда я перехожу на страницу, все поля помечаютсяпо умолчанию недействителен и отображает их сообщения об ошибках, так как они пусты.Я хочу, чтобы проверка прошла при отправке формы.Есть ли простой способ сделать это без установки дополнительных проверочных плагинов?

1 Ответ

0 голосов
/ 12 октября 2018

В объявлении компонента вы установили атрибут required, который пытается проверить вашу форму при загрузке страницы, чтобы вы могли воспользоваться Vue.js и создать свойство req в вашем объекте данных, который изначальноустановите значение false.

. Ниже приведен упрощенный пример, демонстрирующий, как это сделать

.

new Vue({
  el: '#app',

  data() {
    return {
    item:'',
     currentPassword:'',
     req:false
    }
  },
  methods: {
  changePassword: function() {
    this.req=true;
    }
  }

});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Add this after vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app" class="container">
  <div>
    
    <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid">
      <b-form-group id="currentPassword" label="Old password">
        <b-form-input id="password" v-model="currentPassword" placeholder="Enter your old Password" type="password" :required="req" />
      </b-form-group>
      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</div>
...