Bootstrap JS validator and form submit

Question

I am using this Bootstrap validator github.com/1000hz/bootstrap-validator for my bootstrap forms but it appears there is no way to set some external JS conditional before submitting forms.

For example, I would like to do the following from an external JS files:

1 # if form or some input of the form is invalid using validator() then I do some action.

2 # else Users will see some bootstrap button loading message until everything is submitted into the databases.

You can have a single case here:

$('button[data-loading-text]').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.blockUI();

 // #1 if form is invalid using validator() then I unblock the please wait message $.unblockUI(); and reset the bootstrap loading button.
 // #2 else users will still see the "please wait" message + bootsrap loading button untill everything is submitted into the databases.
});        

http://jsfiddle.net/temgo/k07nx06k/12/

Any help will be appreciated as it appears the plugin events are only set for specific field not for full form validation.

Regards

Solution 1

Check out the Events section on 1000hz page. (http://1000hz.github.io/bootstrap-validator/#validator-events)

If you want to fire up the action before validating - just listen to the event.

$('#someFormId').on('validate.bs.validator', function(){
    doSomeStuff();
});

Edit

The problem with events is that it is fired after every field. From what I know this plugin doesn't provide an event for finished successful validation.

Solution 2

$(function () {
     $("#myForm").validator();

     $("#myButton").click(function (e) {
         var validator = $("#myForm").data("bs.validator");
         validator.validate();

         if (!validator.hasErrors()) 
         {
              $("myForm").submit();
         } else 
         {
              ...
         }
     }
})

Hope with will help.

Solution 3

For your ref hope it will help u

$(document).ready(function () {

 $('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        message: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('Done');
    }
});

});

Solution 4

I came across this question looking for something else, but I have worked on precisely what you're trying to achieve.

My solution was to use the snippet of code the plugin author gives for binding to the submit button

$('#form').validator().on('submit', function (e) {
  if ( !e.isDefaultPrevented() ) {
    // put your conditional handling here. return true if you want to submit
    // return false if you do not want the form to submit
  }
});

Hope that helps someone out.

View more solutions

Comments

[jacques]

Thanks for this but this is a different jquery plugin

[jacques]

Yes I have seen that and have tried but it only check for the first click and next users click are not working. Like in this example jsfiddle.net/temgo/k07nx06k/13

[Parth Akbari]

Check this Ref

[jacques]

That is where my problem is. It is fired on every after every field and there is no way for now to control the successful finished validation. Maybe any other help can be useful.

[Zatla00]

Tahnks Igor, it was exactly what I need.