Without further ado, this article will share with you two pieces of code, the first piece of front-end HTML code and the second piece of js code. The code is simple and easy to understand. The key code is as follows:
Front-end HTML code
<form id="myForm" method="post" action="/Task/Test"><div><div><label>Task name</label><div><input type="text" name="takeName" id="takeName" /></div></div><div><label>Assembly name</label><div><input type="text" name="dllName" id="dllName" /></div></div><div><label>Class name</label><div><input type="text" name="methodName" id="methodName" /></div></div><div><label>cron expression</label><div><input type="text" name="cron" id="cron" /></div></div><div><label>Expression description</label><div><input type="text" name="cronRemark" id="cronRemark" /></div></div><div><div><label><input type="checkbox" checked="checked" id="enabled"><span>Enable</span></label></div></div></div><div><button type="button"data-dismiss="modal">Close</button><button type="submit"> 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: 'The assembly name cannot be empty'},//remote: {//ajax verification. server result:{"valid",true or false} Send the current input name value to the service and obtain a json data. The example is correct: {"valid",true} // url: '/Task/Test3',//Verification address// message: 'The user already exists',//prompt message// delay :3000,// type: 'POST',//Request method/// /**Custom submit data, default value submits the 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 is AJAX submission, and the submission event is written in submitHandler
The above is the relevant knowledge about the use of Bootstrap verification controls introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!