Semantic/Foundation/Bootstrap Validation

How we can implement any of the above validations or like below link with the given code

https://www.dotnetcurry.com/jquery/1168/validate-form-jquery-bootstrap-validator

class= "table table-striped table-bordered" style="width:100%" id="tblLocation">
@*"checkbox" id="checkall" />*@
Id
Description
IsActive
Action
class="tbody">
"~/Scripts/Appjs/Location.js">
class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
class="modal-dialog">
class="modal-content">
class="modal-header">
"button" class="close" data-dismiss="modal">"true">×class="sr-only">Close
class="modal-title">Add New Location

class="modal-body">

class="form-horizontal">

class="form-group">

class="control-label col-sm-3" for="Id">Id

class="col-sm-2">

"text" class="form-control form-control-sm" id="txtId" placeholder="Id">

BootstrapValidator actually internally calls the submit, which causes to submit the form if validations success or prevent the form to submit if validation fails.

But in your case, you want the Ajax post with bootstrap validations so is a little tricky.

You can proceed as

step 1. wrap your Model-Body inside a Form ("Location_Form")

step 2. As shown below

$(document).ready(function() {
$('#Location_Form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
$.ajax({
type: "POST",
url: "/Controller/Action"
data: $('#Location_Form').serialize(),
success: function(msg){
$('#Location_Form')[0].reset();
alert("success");
},
error: function(){
}
});
},
excluded: ':disabled',
fields: {
Description: {
validators: {
stringLength: {
min: 50,
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
IsActive: {
validators: {
notEmpty: {
message: 'Please Enter IsActive'
}
}
},
}
});
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
BootstrapValidator actually internally calls the submit, which causes to submit the form if validations success or prevent the form to submit if validation fails.
But in your case, you want the Ajax post with bootstrap validations so is a little tricky.
You can proceed as
step 1. wrap your Model-Body inside a Form ("Location_Form")
step 2. As shown below
$(document).ready(function() {
    $('#Location_Form').bootstrapValidator({

        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {
          $.ajax({
            type: "POST",
            url: "/Controller/Action"
            data: $('#Location_Form').serialize(),
            success: function(msg){


              $('#Location_Form')[0].reset();
              alert("success");
            },
            error: function(){

            }
          });
        },
        excluded: ':disabled',
        fields: {
            Description: {
                validators: {
                        stringLength: {
                        min: 50,
                    },
                        notEmpty: {
                        message: 'Please Enter Description'
                    }
                }
            },
             IsActive: {
                validators: {

                    notEmpty: {
                        message: 'Please Enter IsActive'
                    }
                }
            },

        }
    });
});