CODEWITHSUNDEEP
jquerytwitter-bootstrapvalidation
ali asad
ali asad

Reputation: 1349

Validation is not working with jqBootstrapValidation and ajax

In jQuery I am using $.ajax method with jqBootstrapValidation plugin on a bootstrap form but the validation is not working right. I am using

$('#updatenamebutton').click(function(event)
{
   event.preventDefault();
}

preventDefault is stopping validation from working but I don't want to actually submit the values so I am using event.preventDefault();. Any ideas?

Upvotes: 3

Views: 10758

Answers (2)

mohd4482
mohd4482

Reputation: 1918

You just need to put the ajax function into the jqBootstrapValidation submitSuccess callback.

You don't need to bind a trigger like "submit" or "click" on the form, because jqBootstrapValidation will handle the submit event.

The following code is self-explanatory:

$(function() {

  $('form[name="contact"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({

    submitSuccess: function ($form, event) {

      $.ajax({
        type: 'POST',
        url: $form.attr('action'),
        data: $form.serialize(),
        success: function(data)
        { 
          // just to confirm ajax submission
          console.log('submitted successfully!');
        }
      });

      // will not trigger the default submission in favor of the ajax function
      event.preventDefault();
    }

  });

});

For more details about the plugin: http://reactiveraven.github.io/jqBootstrapValidation/

Upvotes: 10

Saeed Zareian
Saeed Zareian

Reputation: 83

you must do something like below:

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

    preventSubmit: false,
     submitSuccess: function (form, event) {
         event.preventDefault();
         dosubmit(form);
     },
     submitError: function (form, event, errors) {
         event.preventDefault();
         }
    }); } );

Upvotes: 1

Related Questions