引导validator-下拉列表

问题描述：

 <html> 
     <head> 

     <style type="text/css"> 
      #bootstrapSelectForm .selectContainer .form-control-feedback { 
       /* Adjust feedback icon position */ 
        right: -15px; 
       } 
      </style> 
    <link href="css/bootstrap-select.min.css" rel="stylesheet"/> 
    <script src="js/bootstrap-select.min.js" type="text/javascript"> </script> 

</head> 
<body> 
    <form id="bootstrapSelectForm" method="post" class="form-horizontal"> 


     <div class="form-group"> 
      <label class="col-xs-3 control-label">Language</label> 
      <div class="col-xs-5 selectContainer"> 
       <select name="language" class="form-control"> 
        <option value=""></option> 
        <option value="arabic">Arabic</option> 
        <option value="english">English</option> 
        <option value="french">French</option> 
        <option value="german">German</option> 
        <option value="other">Other</option> 
       </select> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-xs-5 col-xs-offset-3"> 
       <button type="submit" class="btn btn-default">Validate</button> 
      </div> 
     </div> 
    </form>

这是对JavaScript代码：

<script type="text/javascript"> 
     $(document).ready(function() { 
     $('#bootstrapSelectForm') 

      .find('[name="language"]') 
     .selectpicker() 
     .change(function(e) { 
      // revalidate the language when it is changed 
       $('#bootstrapSelectForm').formValidation('revalidateField', 'language'); 
      }) 
      .end() 
     .formValidation({ 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
     }, 
     excluded: ':disabled', 
     fields: { 


      language: { 
       validators: { 
        notEmpty: { 
         message: 'Please select your native language.' 
        } 
       } 
      } 
     } 
    }); 
    }); 
     </script> 
     </body> 
    </html>

我不能做验证。我已经做了所有的代码，但仍然找不到解决方案。

你包括**'FormValidation' ** _JS_＆_CSS_文件？ – Arkni

而且，你忘了添加**'framework：'bootstrap'，'** – Arkni

我怎样才能得到FormValidation JS＆CSS文件 – ikramlim

答

你的代码应该看起来像这样。缺少这个工作的唯一缺点是formvalidation.js插件不是免费的。

$(document).ready(function() { 
    $('#bootstrapSelectForm') 
     .find('[name="colors"]') 
      .selectpicker() 
      .change(function(e) { 
       // revalidate the color when it is changed 
       $('#bootstrapSelectForm').formValidation('revalidateField', 'colors'); 
      }) 
      .end() 
     .find('[name="language"]') 
      .selectpicker() 
      .change(function(e) { 
       // revalidate the language when it is changed 
       $('#bootstrapSelectForm').formValidation('revalidateField', 'language'); 
      }) 
      .end() 
     .formValidation({ 
      framework: 'bootstrap', 
      excluded: ':disabled', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
       colors: { 
        validators: { 
         callback: { 
          message: 'Please choose 2-4 colors you like most', 
          callback: function(value, validator, $field) { 
           // Get the selected options 
           var options = validator.getFieldElements('colors').val(); 
           return (options != null && options.length >= 2 && options.length <= 4); 
          } 
         } 
        } 
       }, 
       language: { 
        validators: { 
         notEmpty: { 
          message: 'Please select your native language.' 
         } 
        } 
       } 
      } 
     }); 
});

另一种方法是这样（使用jquery.validate.js）：

JSFIDDLE

$(document).ready(function() { 
    $('#bootstrapSelectForm').validate({ 
     rules: { 
      language: { 
       required: true 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     success: function (element) { 
      element.text('OK!').addClass('valid') 
       .closest('.control-group').removeClass('error').addClass('success'); 
     } 
    }); 
});

答

这是可以发现here

需要导入一个名为formvalidation.js包一个类似的例子。它不是免费的官方网站。如果你愿意，你可以购买包here

引导validator-下拉列表

相关推荐