Bootstrap validator- выпадающий список

этого HTML и JavaScript код:Bootstrap 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>

Я не могу сделать проверку. Я уже сделал весь код, но до сих пор не могу найти решение.

источник

2015-08-28 ikramlim

ли вы включили ** 'FormValidation' ** _JS_ & _CSS_ файлы? – Arkni

И вы забыли добавить ** 'framework: 'bootstrap',' ** – Arkni

как я могу получить файлы формы JV и CSS FormValidation – 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'); 
     } 
    }); 
});

источник

2015-08-28 20:29:50 kalpetros

Это аналогичный пример, который можно найти here

Вам необходимо импортировать пакет под названием formvalidation.js. Он не свободен от официального сайта. Если вы хотите, вы можете приобрести пакет here

источник

2015-08-28 20:20:57 MaXi32

Bootstrap validator- выпадающий список

ответ

Смежные вопросы