Проверка HTML/Bootstrap говорит о недопустимости, когда форма действительна

Question

У меня есть HTML-форма с использованием Bootstrap. В этой форме у меня есть список выбора (обязательное поле). Когда пользователь выбирает опцию «Другое» из этого списка, у меня есть скрытое текстовое поле ввода (одна строка), которое затем отображается для пользователя, чтобы предоставить дополнительные сведения. Этот ввод текста является обязательным полем только тогда, когда он виден - javascript, который показывает/скрывает его, также добавляет/удаляет атрибут «required».

Это ОКРАБОТКО работает нормально. Если я выберет «Другое» из раскрывающегося списка, появится текстовое поле, если я не буду вводить значение там, я получу ошибку проверки, которую я ожидал бы. Проблема в том, что если я выберу другое, отобразите текстовое поле, поместите фокус в текстовое поле, а затем выйдите из него (чтобы отобразить сообщение об ошибке проверки), а затем выберите другое значение из списка выбора без ввода значения в текстовое поле. Он скрывает текстовое поле и удаляет «требуемый» атрибут, как и ожидалось. Форма затем действительна - если я нажму кнопку «Отправить», она отправит, как и ожидалось.

Проблема, похоже, связана с css (возможно, с помощью проверки Bootstrap?). После того, как я выберет другое значение из списка выбора, чтобы скрыть текстовое поле, кнопка отправки остается в «недопустимом» состоянии, то есть сером, и с «Нет!». указатель мыши, когда я навис над ним. Если я нажму на него, он отправит OK, что говорит о том, что он работает правильно, но он просто не похож на него, что не является идеальным с точки зрения пользователя.

Посмотрев на него в инструментах разработчика браузера, я вижу, что класс «disabled» по-прежнему применяется к кнопке отправки после удаления «обязательного» атрибута из текстового поля, несмотря на то, что форма действительна. Я мог бы просто поместить немного javascript в событие изменения, показанное выше, чтобы удалить этот атрибут при скрытии этого текстового поля, но это будет проблемой, если в миксе есть другие поля, даже если это поле действительно, могут быть другие недействительные поля на странице, для которых требуется, чтобы кнопка отправки находилась в отключенном состоянии.

HTML и JavaScript:

//add change event handler to TemplateName dropdown to show/hide textbox for "other" option 
 
$("#TemplateName").change(function() { 
 
    if ($("#TemplateName").val() == "Other") { 
 
     $("#TemplateNameTextGroup").show("fast"); 
 
     $("#TemplateNameText").attr("required", true); 
 
    } else { 
 
     $("#TemplateNameText").removeAttr("required"); 
 
     $("#TemplateNameTextGroup").hide("fast"); 
 
    } 
 
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script> 
 

 
<form id="MyForm" data-toggle="validator" action="Success.html"> 
 

 
    <!--DROPDOWN WITH "OTHER" FREE TEXT OPTION (MANDATORY)--> 
 
    <div class="row"> 
 
    <div class="form-group col-xs-6"> 
 
     <label for="TemplateName">Template Name</label> 
 
     <select class="form-control" id="TemplateName" data-error="This is a mandatory field" required> 
 
     <option value="">Please select...</option> 
 
     <option value="Option 1">Option 1</option> 
 
     <option value="Option 2">Option 2</option> 
 
     <option value="Option 3">Option 3</option> 
 
     <option value="Option 4">Option 4</option> 
 
     <option value="Other">Other</option> 
 
     </select> 
 
     <div class="help-block with-errors"></div> 
 
    </div> 
 
    <div class="form-group col-xs-6" id="TemplateNameTextGroup" style="display:none;"> 
 
     <label for="TemplateNameText">Provide Details</label> 
 
     <input type="text" class="form-control" id="TemplateNameText" data-error="Please provide details" /> 
 
     <div class="help-block with-errors"></div> 
 
    </div> 
 
    <div class="help-block with-errors"></div> 
 
    </div> 
 

 
    <button type="submit" id="submitButton" class="btn btn-default">Submit</button> 
 

 
</form>

Answer 1

Я нашел (своего рода) решение этой проблемы. В основном я явно скрываю событие размытия в текстовом поле сразу после удаления требуемого атрибута. Затем это заставляет проверку проверять это поле еще раз, затем замечает, что поле не требуется, и, таким образом, пустое значение является действительным и, таким образом, помещает кнопку отправки в ее действительное состояние.

Обновлено JavaScript:

//add change event handler to TemplateName dropdown to show/hide textbox for "other" option 
 
$("#TemplateName").change(function() { 
 
    if ($("#TemplateName").val() == "Other") { 
 
    $("#TemplateNameTextGroup").show("fast"); 
 
    $("#TemplateNameText").attr("required", true); 
 
    } else { 
 
    $("#TemplateNameText").removeAttr("required"); 
 
    $("#TemplateNameText").blur(); 
 
    $("#TemplateNameTextGroup").hide("fast"); 
 
    } 
 
});

Answer 2

Если вы используете шоу() & скрыть() в любом языке сценариев, его будет сделать стиль (CSS) changes.i.e. Дисплей будет либо ничем, либо показать. Так что в основном элемент DOM будет загружен, и будут только изменения стиля, основанные на шоу или скрытии. Вместо этого не загружайте элемент DOM в скрипт.