Bootstrap Form Verification: formValidation implements remote verification. validation Form Verification

Bootstrap Form Verification: formValidation implements remote verification. validation Form Verification

Recently, the project used a very powerful form verification. Record. Official Address: http://formvalidation.io/api/

Another point is very important: the Bootstrap of this plug-in is better to use their own, a little changed. You do not need to download the SDK from the Bootstrap website.

Upward effect:

 

Pilot resource import:

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" />  <link rel="stylesheet" href="dist/css/formValidation.css" rel="external nofollow" /

<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>  <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>  <script type="text/javascript" src="dist/js/formValidation.js"></script>  <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script>  <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>

Html:

<form id="defaultForm" class="form-horizontal">  <div class="form-group">    <label class="col-xs-3 control-label">Full name</label>    <div class="col-xs-5">      <input type="text" class="form-control" name="boxId" />    </div>  </div></form>

The following is the verification code;

$ ('# Ultultform '). formValidation ({message: 'invalid value ', icon: {valid: 'glyphicon glyphicon-OK', invalid: 'glyphicon glyphicon-delete', validating: 'glyphicon glyphicon-refresh'}, locale: 'zh _ cn', fields: {boxId: {verbose: false, // indicates that the verification is performed in order. Verification is successful before the next (verification is successful before the last remote verification is sent) validators: {notEmpty: {message: 'This is a required field'}, digits: {message: 'value is not number'}, stringLength: {min: 16, message: 'must be 16 number'}, remote: {type: 'post', url: '/box/unique', message:' This device number already exists ', delay: 2000 }}, onSuccess: function () {// click Submit Form. All forms are verified successfully }});

Background return

{"Valid": true} // verification passed or {"valid": false} // No-'this device number already exists ',

;

The above section describes how to implement the remote verification function of the Bootstrap Form Verification formValidation introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!