Exploring Vue.js Web Form Validation with a Scenario
If you are interested in the vue-form validator library, it can be found at https://github.com/fergaldoyle/vue-form
For a demonstration of this scenario, check out the following jsfiddle link: https://jsfiddle.net/zfqt4yhq/51/
Questions:
After submitting a form via AJAX, using dom's form.reset() method does not reset the form without errors. How can you properly handle resetting the form to its initial state without validation messages and CSS highlighting?
In the provided jsfiddle example, how can you change the $submitted value in order to remove error classes?
- To remove error classes, one condition is setting $submitted value to false. How can this value be changed?
<field-messages name="name" show="$touched || $submitted" class="form-control-feedback"> <div>Success!</div> <div slot="required">Name is a required field</div> </field-messages>var vueformapp = new Vue({ ... });vueformapp.$data.formstate.name.$touched = true // = false;- This changes the value.
vueformapp.$data.formstate.name.$submitted = ture // false;- This will not change the value.
Is there a CSS hack that can be implemented to achieve a form reset in the given jsfiddle scenario?