Grails formRemote with jQBootStrapValidator

Question

I am working with a simple form that I am submitting via Grails < formRemote > tag. This is working fine and as expected. Recently I added jqbootstrapvalidaton .js into my project in order to add some validation on my simple form. When doing this and pressing submit on my form, the form will now POST for every single element that's defined (eg if I have 5 form elements, I will get 5 POST submissions when I press submit while using Grails's formRemote and jqBootstrapvalidation).

As an example, please consider the following form:

<g:formRemote  name="sampleForm" url="[controller: 'test', action: 'demo']" >

<input type="text" name="myy" id="myy" value=""  required />
<input type="text" name="myo" id="myo" value="" required />

<input type="submit" name="submit" value="Submit" />

</g:formRemote>

As you can see, the form has 2 input variables and 1 submit button. Typically (when not using jqbootstrapvalidaton ), I can submit this form and it will POST one time to my controller.

However, ever since introducing the jqbootstrapvalidaton to this simple form, I am getting 3 POST submissions when I click submit.

The only other code on my page is this:

$(function () {
  $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
}

Which I use for setting up the validation.

Has anyone experienced anything similar? Any suggestions as to how to get this form to only POST one time, instead of POSTing for each form element would be great!

Thanks in advance.

Answer 1

You must use the jqBootstrapValidation itself to submit your form via ajax. It has a method to submit the form if there is not any errors. An sample code is as below:

$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation({

    preventSubmit: false,
     submitSuccess: function (form, event) {
         event.preventDefault();
         dosubmit(form);///your javascript function to submit
     },
     submitError: function (form, event, errors) {
         event.preventDefault();
         }
    }); } );