Bootstrap 3 состояния проверки с JQuery апробированы формы, которая использует плагин Избранный

Question

Контекст

• У меня есть форма, что я проверяющий с помощью JQuery Validate Plugin.
• Все элементы управления формой необходимы, за исключением текстового поля.
• Я использую состояния проверки Bootstrap 3 для проверки правильности проверки элементов формы.
• Для выбора управления, я использую

Проблема

У меня возникли проблемы, выяснить, как решить следующее:

1- Предотвратить текстовое поле управление от применения условия подтверждения успеха, поскольку этот контроль формы не проверяется, поскольку он является необязательным.

(Для того, чтобы воспроизвести проблему в поле ниже JSFiddle, нажмите кнопку Submit с пустой формой)

2- Применить состояние проверки ошибок на границе списка. Сейчас только метка получает состояние проверки ошибок.

3 - Удалите состояние проверки и сообщения об ошибке и примените класс успеха, когда пользователь выберет опцию из выпадающего списка. Сейчас сообщение об ошибке и класс ошибок остаются.

JSFiddle

Я создал JSFiddle для иллюстрации проблемы.

HTML-

<div class="container" role="main"> 
    <!-- Contents of the popover associated with the task name text input --> 
    <div id="namePopoverContent" class="hide"> 
     <ul> 
      <li><small>...</small></li> 
      <li><small>...</small></li> 
     </ul> 
    </div> 

    <form class="form-horizontal" method="post" action="" id="taskForm"> 
     <div class="row"> 
      <div class="col-md-9"> 
       <div class="form-group"> 
        <label for="taskName" class="control-label col-md-1">Name</label> 
        <div class="col-md-11"> 
         <input type="text" class="form-control taskNameValidation" id="taskName" name="taskName" autofocus required data-toggle="popover"> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3"></div> 
     </div> 

     <div class="row"> 
      <div class="col-md-9"> 
       <div class="form-group"> 
        <label for="taskDataset" class="col-md-1 control-label">Dataset</label> 
        <div class="col-md-11"> 
         <select class="form-control chosen-select taskDatasetValidation" data-placeholder="Choose a dataset" name="taskDataset" id="taskDataset" required> 
          <option value=""></option> 
          <option value="runnableDataset_Id1">Dataset 1</option> 
          <option value="runnableDataset_Id2">Dataset 2</option> 
          <option value="runnableDataset_Id3">Dataset 3</option> 
          <option value="runnableDataset_Id4">Dataset 4</option> 
         </select> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3"></div> 
     </div> 
     <div class="row"> 
      <div class="col-md-9"> 
       <div class="form-group"> 
        <label for="taskDescription" class="col-md-1 control-label">Description</label> 
        <div class="col-md-11"> 
         <textarea class="form-control" name="taskDescription" id="taskDescription" maxlength="1000" rows="4"></textarea> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3"></div> 
     </div> 
     <div class="row"> 
      <div class="col-md-9"> 
       <div class="pull-right top-margin"> 
        <input type="submit" class="btn btn-primary btn-sm" value="Submit" name="taskSetUpSubmit"> 
       </div> 
      </div> 
      <div class="col-md-3"></div> 
     </div> 
    </form> 

JS

//Bootstrap popover 
$('[data-toggle="popover"]').popover({ 
    trigger: "hover focus", 
    container: "body", 
    placement: "bottom", 
    html: true, 
    title: "Name Tips", 
    content: function() { return $('#namePopoverContent').html();} 
}); 

//Chosen select plugin 
$(function() { 
    $('.chosen-select').chosen(); 
    $('.chosen-select-deselect').chosen({ allow_single_deselect: true }); 
}); 

//JQuery validate plugin 
$(function() { 
    $.validator.setDefaults({ 
     errorClass: 'text-danger', 
     ignore: ':hidden:not(.chosen-select)', 
     errorPlacement: function (error, element) { 
      if (element.hasClass('chosen-select')) 
       error.insertAfter(element.siblings(".chosen-container")); 
      else { 
       error.insertAfter(element); 
      } 
     } 
    }); 

    //rules and messages objects 
    $("#taskForm").validate({ 
     highlight: function(element) { 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
     }, 
     unhighlight: function(element) { 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
     } 
    }); 

    $('.taskNameValidation').each(function() { 
     $(this).rules('add', { 
      required: true, 
      messages: { 
       required: "Provide a space-separated name" 
      } 
     }); 
    }); 

    $('.taskDatasetValidation').each(function() { 
     $(this).rules('add', { 
      required: true, 
      messages: { 
       required: "Choose a dataset" 
      } 
     }); 
    }); 
}); 

Я боролся с этим без удачи. Любая помощь будет оценена.

Answer 1

1. Предотвращения управления TextArea от быть применено состояние проверки успеха, так как этот контроль формы не подтвержден, поскольку это не является обязательным.

   Пустой textarea является «действительным», поскольку в вашей проверке указано пустое поле, поэтому оно зеленое. Вы могли бы условно использовать highlight и unhighlight, так что он не будет применяться к вашему textarea. Однако тогда это не сработает, когда будет оценено ваше правило maxlength. Я не знаю обходного пути, которое приведет к тому, что unhighlight проигнорируется, когда поле технически «действительно» и все же пусто. В этом плагине нет «необязательного» состояния/состояния ... после оценки формы, поля являются «действительными» или «недопустимыми», между ними нет ничего.

   EDIT: Вы можете условно применить highlight и unhighlight на textarea с помощью переключателя пользовательских :blank и применяя класс к этому «необязательного» элемента. Затем вы получите зеленые контуры красного цвета &, но только тогда, когда это «необязательное» поле заполняется и/или ваши правила оцениваются.

   highlight: function (element) { 
       if (! ($(element).hasClass('optional') && $(element).is(':blank'))) { 
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
       } 
   }, 
   unhighlight: function (element) { 
       if (! ($(element).hasClass('optional') && $(element).is(':blank'))) { 
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
       } 
   } 
   

2. Применить состояние проверки ошибок на границе списка. Сейчас только метка получает состояние проверки ошибок.

   Вам необходимо посмотреть рендерную DOM и найти динамически созданный элемент Chosen. Затем вам нужно написать jQuery для перехода к этому элементу и условно применить соответствующие классы через highlight и unhighlight.

   highlight: function (element) { 
       if ($(element).hasClass('chosen-select')) { 
        $(element).siblings('.chosen-container').removeClass('has-success').addClass('has-error'); 
       } 
       $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
   }, 
   unhighlight: function (element) { 
       if ($(element).hasClass('chosen-select')) { 
        $(element).siblings('.chosen-container').removeClass('has-error').addClass('has-success'); 
       } 
       $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
   } 
   

   Этот код выше является применения has-error и has-success классов к оказанному Избранному div элементу; вам просто нужно настроить CSS, чтобы была красная рамка. В противном случае, напишите свои собственные классы CSS для этого, как я сделал в демо ниже. Отрегулируйте соответствующим образом.

3. Удалить состояние проверки и сообщения об ошибке и применить класс успеха, когда пользователь выберет опцию из выпадающего списка.

   Вы должны написать change обработчик, который вызывает метод .valid() на select элемента каждый раз, когда она меняется. Это связано с тем, что вы взаимодействуете с отображенным списком выбора, а не с фактическим элементом select. В противном случае плагин jQuery Validate запускается неправильно.

   $('.chosen-select').on('change', function() { 
       $(this).valid(); 
   }); 
   

DEMO: https://jsfiddle.net/jxvqsodz/7/