Target specific submit button using bootstrap validator

Question

My form has two submit buttons, one submits the main form and the other one sends data using ajax. Can't figure out how to tell bootstrap validator that in this case we are using different submit button. And yes on that submit im using preventDefault();

$("#submitformat").click(function( event ) {
   $('#formid').bootstrapValidator({  // this id is correct
     message: 'This value is not valid',
     fields: {
        alias: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                    message: 'The username is required and cannot be empty'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The username must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_]+$/,
                    message: 'The username can only consist of alphabetical, number and underscore'
                }
            }
        },
    }
});

HTML button:

<button type="submit" id="submitformat" class="btn btn-primary">Submit</button>

Orelsanpls · Accepted Answer · 2014-06-20 13:18:27Z

Accordig to Here you have to use submitHandler option on bootstrapvalidator to use it with ajax

Taked from the link

Using Ajax to Submit Form

In the case you want to use Ajax to submit the form and perform additional tasks after that, you can use submitHandler option.

Regard to our modal example, the following code shows how to:

Check if there is an account with given username and password by sending them to remote URL via an Ajax request If yes, reload current page Otherwise, show the message informing the account is not found

<script>
$(document).ready(function() {
    $('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {
            $.post(form.attr('action'), form.serialize(), function(result) {
                // The result is a JSON formatted by your back-end
                // I assume the format is as following:
                //  {
                //      valid: true,          // false if the account is not found
                //      username: 'Username', // null if the account is not found
                //  }
                if (result.valid == true || result.valid == 'true') {
                    // You can reload the current location
                    window.location.reload();

                    // Or use Javascript to update your page, such as showing the account name
                    // $('#welcome').html('Hello ' + result.username);
                } else {
                    // The account is not found
                    // Show the errors
                    $('#errors').html('The account is not found').removeClass('hide');

                    // Enable the submit buttons
                    $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
                }
            }, 'json');
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});
</script>

Plus this is not neccessary to overwrite .click() when the button have sumbit (type of the button)

isherwood · Accepted Answer · 2014-06-20 13:19:04Z

0

Validator probably doesn't care how the form was submitted. You may need to do something like this to detect which button was clicked:

if (event.target == $('#submitformat')) {
    ...
}

answered Jun 20, 2014 at 13:19

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Collectives™ on Stack Overflow

Target specific submit button using bootstrap validator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related