當表單有效時，HTML/Bootstrap驗證表示無效

Question

我有一個使用Bootstrap的HTML表單。在這個表格中，我有一個選擇列表（必填字段）。當用戶從這個列表中選擇「Other」選項時，我有一個隱藏文本輸入字段（單行），然後顯示給用戶以提供更多詳細信息。此文本輸入僅在其可見時纔是必填字段 - 顯示/隱藏它的JavaScript還會添加/刪除「必需的」屬性。

這近乎正常。如果從下拉列表中選擇「其他」，則會顯示文本框，如果我沒有輸入值，則會出現我期望的驗證錯誤。問題是，如果我選擇其他字段，顯示文本字段，將焦點放在文本字段中，然後標籤出來（因此它顯示驗證錯誤消息），然後從選擇列表中選擇另一個值，而不在文本域。它隱藏文本字段並按預期刪除「required」屬性。表單是有效的 - 如果我點擊提交按鈕，它按預期提交。

問題似乎與CSS（可能來自Bootstrap驗證？）。在我從選擇列表中選擇另一個值來隱藏文本字段後，提交按鈕保持「無效」狀態，即變灰，並且顯示「No！」鼠標指針懸停在它上面時。如果我點擊它，它會提交OK，這表明它可以正常工作，但它看起來不像它，從用戶的角度來看這並不理想。

從瀏覽器的開發人員工具中可以看出，儘管表單有效，但從文本字段中刪除「必需」屬性後，仍然可以看到「禁用」類仍然應用於提交按鈕。我可能只是在上面顯示的更改事件中放入一些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元素將被加載，並且將只有基於show或hide的樣式更改。而不是在腳本中加載DOM元素。