Using Bootstrap validator.js with Jquery ajax form post

Question

I'm trying to use this validator https://github.com/1000hz/bootstrap-validator for client-side checking and then allowing the ajax submission of an entire form. I can't find an example in the docs and my current code doesn't work, it reloads the whole page with the values as a GET query string. Any thoughts? Thanks!

 $('#send-form').validator().on('submit', function (e) {

   if (e.isDefaultPrevented()) {
          // handle the invalid form...
    } else {
                        // everything looks good!
       $.post( "/post/ajax",

            $( "#send-form" ).serialize(),

            function( data ) {

                 $( "#ajax-result" ).html( data );

            });

       }
   });

Tried adding e.preventDefault() above if (e.isDefaultPrevented()) ? — guest271314
– guest271314, Commented Mar 22, 2015 at 16:13

Dhiraj · Accepted Answer · 2015-03-25 23:48:16Z

13

+100

Add e.preventDefault() in the else statement.

If you look at #227 in the source code, the validator prevents form submission if the form is invalid. Hence e.isDefaultPrevented() can be used to check if the form is invalid.

The form's default action is carried out if the form is valid which is submitting the form (why the page reloads). Since you need to do an ajax you should stop default action by e.preventDefault()

$('#send-form').validator().on('submit', function (e) {
    if (e.isDefaultPrevented()) {
        alert('form is not valid');
    } else {
        e.preventDefault();
        alert('form is valid');
        // your ajax
    }
});

Here is a demo

Hope this helps

edited Mar 25, 2015 at 23:48

answered Mar 25, 2015 at 23:41

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Bootstrap validator.js with Jquery ajax form post

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related