How to reset the vue-form after ajax submission completed

Related searches
Discription - vue.js web form validation scenario

The library of vue-form validator used is from https://github.com/fergaldoyle/vue-form

jsfiddle link: https://jsfiddle.net/zfqt4yhq/51/

Question:
  1. when using dom's form.reset() method couldn't get form reset to the state without error class. what's the correct way to handle the reset form after ajax submittion? when u click on the "reset" button, how to restore to init state without validation text appear below & css highlight?

  2. In the jsfiddle example , browser console debug mode

    • since one of the condition to remove error class is to make $submitted value to false, yet how to change the $submitted value?

    <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;
      • value changed.
    • vueformapp.$data.formstate.name.$submitted = ture // false;
      • value won't be changed.
  3. Another possible workaround, Is there any CSS hack to achieve reset form in this jsfiddle case.

It looks like library unfortunately is not resetting fields as per https://github.com/fergaldoyle/vue-form/issues/55

user there suggest you to use:

Object.keys(myFormState).forEach(k => {
  if (k[0] == '$') return;
  const field = myFormState[k];
  field._setPristine();
  field._setUntouched();
});

to set form as pristine and fields as untouched. Creator says he will add feature on next release.

You could also use vuelidate: https://monterail.github.io/vuelidate/#sub-v-methods

which comes with a reset method. BTW in your tests don't forget to rest model like dfsq says

Submitting form in Vue.js with ajax, How do I submit a form using vue js and vue-resource instead of my usual jQuery way? Using a response from ajax, how can I output data into a div preferably using Thank you @bestmomo, your example with lumen is instructive. Well done each input , since in the directive we are already fetching the whole form data� Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Updated: This is how you reset a form after successful submission.

  1. use javascript selectors to select the form. Assuming you only have one form in the page, this would be ideal.
let form = document.querySelector('form');
form.reset();
  1. If you are using vee-validate, you need to reset the validator so that it cannot throw errors.
this.$validator.reset()

Thast should be all.

Vue data reset, Learn more How to reset the vue-form after ajax submission completed Due to the limitation of ES5 and to ensure consistent behavior across browsers, Vue.js� I have a template which contains multiple forms which all have their own validator. When I have submitted the form I'd like to reset the validator. From what I've read from the documentation you can

custom validation display tag css name hide

$('.error').hide();

or other option

 $('#formname').clearValidation(); 

Processing a Form with Vue ― Scotch.io, While those tools can help to make your AJAX forms very clean, and provide your With data-binding and reactivity, we can quickly process a form since all the Grab the form; Grab the input s in the form; Listen for the form's submit event� Maybe I'm doing it wrong but while binding v-if to two distinct input fields it only works if the input values hasn't changed. var app = window.app = new Vue({ el: '#admin-app', data()

Vue data reset, r/vuejs: Vue.js is a library for building interactive web interfaces. So, initiating Learn more How to reset the vue-form after ajax submission completed. Mounted � since you are using jquery library, i would advise you utilize the reset() method. Firstly, add an id attribute to the form tag <form id='myForm'> Then on completion, clear your input fields as: $('#myForm')[0].reset();

Vue data reset, UI API. Quite a few frameworks have built-in HTTP APIs. Learn more How to reset the vue-form after ajax submission completed Mounted is the most-often used� Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

The idea in brief is to deal with the form by submit event after dealing with submit button by click event. Whatever is your needs inside this method, it will work now without refresh :) Just be sure to deal with ajax in the right way and you will be done. Of course it will work only with forms.

Comments
  • Reset function added in latest release: github.com/fergaldoyle/vue-form/releases/tag/4.0.2
  • thanks for the recommendation on other more popular vue-validator.
  • BTW, are u able to figure out how to put the above fix code u mentioned into the jsfiddle mentioned above to make this example reset form work? very appreciated.
  • @BOBO no, i used this.formState, but it didn't seemed to work, i'm at work now, so i couldn't play too much with it, i'll try to help more later.
  • Thanks for the assistant, rightnow I am able to achieve a dirty reset no highlighting workaround by CSS and append parent class , but not the ideal solution.