Brief Analysis on the Use of Bootstrap Verification Control

Say nothing more. This article will probably share two pieces of code, the first HTML code, the second js code, the code is easy to understand, the key code is as follows:

Front End HTML Code

<form id="myForm" method="post" class="form-horizontal" action="/Task/Test">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-3 control-label"> Task Name </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="takeName" id="takeName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label"> Assembly Name </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="dllName" id="dllName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label"> Class Name </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="methodName" id="methodName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">cron Expression </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="cron" id="cron" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label"> Expression Description </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="cronRemark" id="cronRemark" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="checkbox">
<label>
<input type="checkbox" class="colored-success" checked="checked" id="enabled">
<span class="text"> Enable </span>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
 Close 
</button>
<button type="submit" class="btn btn-primary">  Submit </button>
</div>
</form> 

JS

<script>
$(document).ready(function () {
$("#myForm").bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
takeName: {
validators: {
notEmpty: {
message: ' Task name cannot be empty '
}
}
},
dllName: {
validators: {
notEmpty: {
message: ' Assembly name cannot be empty '
},
//remote: {//ajax Verification. server result:{"valid",true or false}  Send current to service input name Value, get 1 individual json Data.Example is correct: {"valid",true} 
// url: '/Task/Test3',// Verify Address 
// message: ' User already exists ',// Prompt message 
// delay :3000,
// type: 'POST',// Request Method 
// /** Custom submit data, default submit current input value
// * data: function(validator) {
// return {
// password: $('[name="passwordNameAttributeInYourForm"]').val(),
// whatever: $('[name="whateverNameAttributeInYourForm"]').val()
// };
// }
// */
//},
}
},
methodName: {
validators: {
notEmpty: {
message: ' Class name cannot be empty '
}
}
},
cron: {
validators: {
notEmpty: {
message: 'cron Expression cannot be empty '
}
}
}
},
submitHandler: function (validator, form, submitButton) {
var taskData = {};
taskData.taskName = $('#takeName').val();
taskData.dllPath = $('#dllName').val();
taskData.methodName = $('#methodName').val();
taskData.cronExpression = $('#cron').val();
taskData.remark = $('#cronRemark').val();
taskData.enabled = $('#enabled').is(':checked');
$.ajax({
type: "post",
url: "/Task/AddTask",
data:taskData,
success: function (data) {
alert(data);
$('#myForm').data('bootstrapValidator').resetForm(true);
}
});
}
})
})
</script> 

This method submits for AJAX, and the submission event is written in submitHandler