bootstrap Validator Modal Box, jsp, Form Validation Ajax Submission Function

Effect diagram：

As shown, this is the function completed by using the Validator plugin, with very powerful and convenient effects. I recommend using this method, and finally, I will introduce the original JavaScript validation writing method.

First, import the plugin：

<link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"> 

<script src="<%=basePath %>bootstrap/js/bootstrapValidator.min.js"></script> 
<script src="<%=basePath %>bootstrap/js/bootstrapValidator.zh_CN.js"></script> 
bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/

jsp：

<div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal"-dialog" role="document"> 
   <div class="modal"-content"> 
    <div class="modal"-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal"-title" id="myModalLabel_add">Add</h4> 
    </div> 
    <div class="modal"-body" style="height:680px;"> 
      <form id="defaultForm" class="form"-horizontal"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="company_name">Company Name</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_name" type="text" placeholder="Please enter the company name" name="company_name"/> 
        </div> 
        <label class="col-sm-2 control-label" for="company_id">Company ID</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_id" type="text" placeholder="Please enter the company ID" name="company_id"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="computer_room">Computer Room</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="computer_room" type="text" placeholder="Please enter the computer room"/> 
        </div> 
        <label class="col-sm-2 control-label" for="cabinet">Cabinet</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="cabinet" type="text" placeholder="Please enter the cabinet"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_type">Device Type</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_type" type="text" placeholder="Please enter the device type"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_name">Device Name</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_name" type="text" placeholder="Please enter the device name"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_ip">Device IP</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_ip" type="text" placeholder="Please enter the equipment IP" name="equipment_ip" /> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_brand">Equipment Brand</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_brand" type="text" placeholder="Please enter the equipment brand"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_model">Equipment Model</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_model" type="text" placeholder="Please enter the equipment model"/> 
        </div> 
        <label class="col-sm-2 control-label" for="shelf_position">Shelf Location</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="shelf_position" type="text" placeholder="Please enter the shelf location"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_sn">Equipment SN Number</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_sn" type="text" placeholder="Please enter the equipment SN number"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_pn">Equipment PN Number</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_pn" type="text" placeholder="Please enter the equipment PN number"/> 
        </div> 
       </div> 
      </form> 
      </div> 
     <div class="modol-footer" id="button_sub"> 
      <button type="reset" id="btn_reset" class="btn btn-default"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>Reset</button> 
      <button type="button" id="" name="submit" class="btn btn-primary submit_review"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>Submit Review</button> 
     </div> 
   </div> 
  </div> 
 </div>

I have not used form submission validation here, and have clicked the button button, Ajax submission, please note.

js：

$(function(){/* Document loading, execute a function*/ 
// $(".submit_review").attr({"disabled":"disabled"}); 
 $('#defaultForm').bootstrapValidator({ 
    message: 'This value is not valid', 
    feedbackIcons: {/*Input box shows different states, displaying the style of the image*/ 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: {/*verification*/ 
     company_name: {/*The key name username corresponds to the input name value*/ 
      validators: { 
       notEmpty: {/*non-empty prompt*/ 
        message: 'The company name cannot be empty' 
       }, 
//       stringLength: {/*length prompt*/ 
//        min: 6, 
//        max: 30, 
//        message: 'The username is within'6to3between 0 
//       }/*The last one does not have a comma*/ 
      } 
     }, 
     company_id: { 
      validators: { 
       notEmpty: { 
        message: 'The company ID cannot be empty' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validators: { 
       notEmpty: { 
        message: 'The device IP cannot be empty' 
       }, 
       regexp: { 
        regexp: /^(\d{1,2|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2|1\d\d|2[0-4]\d|25[0-5])$/, 
        message: 'The device IP is invalid' 
         } 
      } 
     }, 
    } 
  } 
 }); 

$("#btn_reset").click(function(event) { 
  /* Act on the event */ 
  $('#defaultForm').data('bootstrapValidator').resetForm(true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(event) { 
  /* Act on the event */ 
  $('#defaultForm').bootstrapValidator('validate'); 
  var flag = $("#defaultForm").data('bootstrapValidator').isValid(); 
  if (!flag) { 
   toastr.error("填写有误，请重新填写！"); 
  } else { 
   $.post('addEquipmentInfoCheck.action', { 
    "equipmentInfoCheck.companyId": $("#company_id").val(), 
    "equipmentInfoCheck.companyName": $("#company_name").val(), 
    "equipmentInfoCheck.machineRoom": $("#computer_room").val(), 
    "equipmentInfoCheck.equipmentCabinet": $("#cabinet").val(), 
    "equipmentInfoCheck.deviceType": $("#equipment_type").val(), 
    "equipmentInfoCheck.deviceName": $("#equipment_name").val(), 
    "equipmentInfoCheck.deviceIp": $("#equipment_ip").val(), 
    "equipmentInfoCheck.deviceBrand": $("#equipment_brand").val(), 
    "equipmentInfoCheck.deviceModel": $("#equipment_model").val(), 
    "equipmentInfoCheck.position": $("#shelf_position").val(), 
    "equipmentInfoCheck.deviceSn": $("#equipment_sn").val(), 
    "equipmentInfoCheck.devicePn": $("#equipment_pn").val(), 
    "equipmentInfoCheck.state":1 
   }, function(data, textStatus, xhr) { 
    /*optional stuff to do after success */ 
    if (textStatus == "success") { 
     // e.preventDefault(); 
     $('#defaultForm').data('bootstrapValidator').resetForm(true); 
     $("#myModal_add").modal('hide'); 
     toastr.success("Submission successful"); 
    }else{ 
     $("#myModal_add").modal('hide'); 
     toastr.error("Submission failed"); 
    } 
   }); 
  } 
 }); 

OK, up to this point, the modal box validation and submission are completed~

The following is the original js validation:

$("#equipment_ip").blur(function(){ 
 var reg = /^(\d{1,2|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2|1\d\d|2[0-4]\d|25[0-5])$/ ;  
 var flag=reg.test($(this).val()); 
 if(!flag){ 
 toastr.error("Invalid IP, please re-enter"); 
 $.val(""); 
 } 
); 

The above-mentioned is the introduction of the modal box, jsp, form validation Ajax submission function of bootstrap Validator given by the editor to everyone, I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I also want to thank everyone for their support of the Yelling tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any suspected copyright content, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)