Vuelidate allows for validation to occur upon clicking a button, rather than waiting for the field

Question

Vuelidate allows for validation to occur upon clicking a button, rather than waiting for the field

As I navigate my way through learning vuelidate, everything seems to be going smoothly, except for one thing. I can't figure out how to trigger validation only when the "Submit" button is clicked. Currently, the fields turn red as soon as I start typing, but I want them to wait until the user is ready to submit the form.

This is my progress so far:

Vue.use(window.vuelidate.default)
const { required, minLength, sameAs } = window.validators

new Vue({
el: "#app",
  data: {
  user: {
    login: '',
      password: '',
      repeatedPassword: ''
    }
  },
  validations: {
  user: {
    login: {
      required,
        minLength: minLength(5)
      },
      password: {
      required,
        minLength: minLength(8)
      },
      repeatedPassword: {
      required,
        sameAs: sameAs('password')
      }
    }
  }
})

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}

.valid {
  border-color: #5A5;
  background: #EFE;
}

.valid:focus {
  outline-color: #8E8;
}

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
`<div id="app">

  <input type="text" placeholder="login"
    v-model="user.login"
    v-on:input="$v.user.login.$touch"
    v-bind:class="{error: $v.user.login.$error, valid: $v.user.login.$dirty && !$v.user.login.$invalid}">
  <br/>    
  <input type="password" placeholder="password"
    v-model="user.password"
    v-on:input="$v.user.password.$touch"
    v-bind:class="{error: $v.user.password.$error, valid: $v.user.password.$dirty && !$v.user.password.$invalid}">
  <br/>  
  <input type="password" placeholder="repeat password"
    v-model="user.repeatedPassword"
    v-on:input="$v.user.repeatedPassword.$touch"
    v-bind:class="{error: $v.user.repeatedPassword.$error, valid: $v.user.repeatedPassword.$dirty && !$v.user.repeatedPassword.$invalid}"
  >
  <button :disabled="$v.user.$error" @click="$v.user.$touch()">
    Submit!
  </button>
</div>`

javascript vue.js onclick vuelidate

Answer 1

Answer №1

Adapting to the Vuelidate approach has been a bit challenging for me, but essentially, it operates in the following manner:

By setting it up this way, you can implement validation for individual form inputs/elements and then conduct an overall check to determine if the form is "dirty" and/or "invalid"

form: {
"name": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
  "required": {
    "type": "required"
  }
}
},
"Age": {
  "required": false,
  "$invalid": true,
  "$dirty": false,
  "$error": false,
  "$pending": false,
  "$params": {
    "required": {
      "type": "required"
    }
  }
},
"$invalid": true, <------- This indicates whether the form is valid/invalid
"$dirty": false, <------- This reveals if the form has been interacted with.
"$error": false,  <-------  This assesses both invalidity and dirtiness
"$pending": false,
"$params": {
   "nestedA": null,
   "nestedB": null
}
}

In terms of practical application, one approach could involve triggering the validateform event upon submission.

@click.prevent="validateform"

Subsequently, create a validateform method within your Vue instance that verifies

$v.form.$invalid or $v.form.$error

and then either showcase errors or invoke the actual submit process.

Answer 2

Adapting to the Vuelidate approach has been a bit challenging for me, but essentially, it operates in the following manner:

By setting it up this way, you can implement validation for individual form inputs/elements and then conduct an overall check to determine if the form is "dirty" and/or "invalid"

form: {
"name": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
  "required": {
    "type": "required"
  }
}
},
"Age": {
  "required": false,
  "$invalid": true,
  "$dirty": false,
  "$error": false,
  "$pending": false,
  "$params": {
    "required": {
      "type": "required"
    }
  }
},
"$invalid": true, <------- This indicates whether the form is valid/invalid
"$dirty": false, <------- This reveals if the form has been interacted with.
"$error": false,  <-------  This assesses both invalidity and dirtiness
"$pending": false,
"$params": {
   "nestedA": null,
   "nestedB": null
}
}

In terms of practical application, one approach could involve triggering the validateform event upon submission.

@click.prevent="validateform"

Subsequently, create a validateform method within your Vue instance that verifies

$v.form.$invalid or $v.form.$error

and then either showcase errors or invoke the actual submit process.

Answer 3

Answer №2

After configuring the validations, all you need to do is invoke a method to validate any errors. Simply follow these steps:

<button @click="validate">Submit</button>

The validation method:

validate () {
  this.$v.$touch() // This will trigger validation for all fields
  if (!this.$v.$invalid) { // $invalid becomes true when validation fails
   // No validation errors found. Proceed with your desired action here
  }
}

Answer 4

After configuring the validations, all you need to do is invoke a method to validate any errors. Simply follow these steps:

<button @click="validate">Submit</button>

The validation method:

validate () {
  this.$v.$touch() // This will trigger validation for all fields
  if (!this.$v.$invalid) { // $invalid becomes true when validation fails
   // No validation errors found. Proceed with your desired action here
  }
}

Answer 5

Answer №3

Currently, the touched field turns red as soon as input is provided.

This indicates that the field is being marked as 'dirty' automatically, which was not the default behavior in the previous version (Vuelidate 2).

Please ensure that you do not have $autoDirty: true set or change it to "false."

In Vuelidate 2, all you need to do to achieve your desired outcome is to call $touch() on the submit click event, as $autoDirty defaults to false. Refer to Roland's answer for more details.

Answer 6

Currently, the touched field turns red as soon as input is provided.

This indicates that the field is being marked as 'dirty' automatically, which was not the default behavior in the previous version (Vuelidate 2).

Please ensure that you do not have $autoDirty: true set or change it to "false."

In Vuelidate 2, all you need to do to achieve your desired outcome is to call $touch() on the submit click event, as $autoDirty defaults to false. Refer to Roland's answer for more details.

Answer 7

Answer №4

My approach to using VeeValidate 3 involves the following steps:

<validation-observer ref="jobValidation">
 <form>
     <button v-on:click="nextPage()" type="button">Next</button>
 </form>
</validation-observer>

Additionally, my implementation includes the following snippet within the methods:

nextPage(): void {                 
    const validation = (this.$refs.jobValidation as any);
    validation.validate().then(() => {
        if (validation.flags.invalid) {                           
            // Handling invalid inputs
            // Also displaying all errors in a summary
            validation.$children.forEach((child: any) => {
                child.errors.forEach((error: any) => {
                    console.log(error);
                });
                return;
            });
        } else {
            // Proceeding with valid data
            // Performing required actions
        }
    });  
},

Answer 8

My approach to using VeeValidate 3 involves the following steps:

<validation-observer ref="jobValidation">
 <form>
     <button v-on:click="nextPage()" type="button">Next</button>
 </form>
</validation-observer>

Additionally, my implementation includes the following snippet within the methods:

nextPage(): void {                 
    const validation = (this.$refs.jobValidation as any);
    validation.validate().then(() => {
        if (validation.flags.invalid) {                           
            // Handling invalid inputs
            // Also displaying all errors in a summary
            validation.$children.forEach((child: any) => {
                child.errors.forEach((error: any) => {
                    console.log(error);
                });
                return;
            });
        } else {
            // Proceeding with valid data
            // Performing required actions
        }
    });  
},

Vuelidate allows for validation to occur upon clicking a button, rather than waiting for the field

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ensuring that at least one checkbox is selected with the help of vuejs

Why is React's nested routing failing to render properly?

"Strategies for effectively utilizing the .find method to locate specific users within a database

Getting the JavaScript file name within another JavaScript file - a simple guide

Executing changes to Vuex store mutation for array manipulation

Finding the source of the err.kind expression in the MERN stack: Unraveling the mystery

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

In the production mode, Nuxt styles may not be properly applied

Having trouble retrieving a specific key from the state object in Redux using TypeScript

The code coverage for the "rendering expectations" test in a particular component is insufficient

Tips for preventing the "Error: Avoided redundant navigation to current location: "/inside/home" when the authentication guard restricts access to the route

integrating material design components into Vue.js applications

What is the best way to target the shadow DOM host element specifically when it is the last child in the selection?

Top method for utilizing overlays

Is Fetch executed before or after setState is executed?

Codeigniter session unexpectedly ends after AJAX call completes successfully

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

Tips for modifying the content displayed on a v-list in Vue.js dynamically

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

Unable to retrieve the field value from the Json Object