フォームが有効な場合、HTML /ブートストラップ検証で無効と表示されます

Question

私はブートストラップを使用してHTMLフォームを取得しています。このフォームには選択リスト（必須フィールド）があります。ユーザがこのリストからオプション「その他」を選択すると、ユーザに詳細を提供するために表示される隠しテキスト入力フィールド（1行）が表示されます。このテキスト入力は、表示されている場合にのみ必須のフィールドです。表示/非表示のjavascriptは、「必須」属性を追加/削除します。

これはほぼ正常に動作します。ドロップダウンから「その他」を選択すると、テキストボックスが表示されます。そこに値を入力しないと、私が期待している検証エラーが表示されます。問題は、他を選択してテキストフィールドを表示し、テキストフィールドにフォーカスを置き、タブアウトして（検証エラーメッセージを表示している）、選択リストから別の値を選択します。テキストフィールド。テキストフィールドを非表示にし、期待どおりの "必須"属性を削除します。フォームは有効です。送信ボタンをクリックすると、期待どおりに送信されます。

問題は（おそらくブートストラップ検証から？）CSSであると思われます。テキストフィールドを非表示にするために選択リストから別の値を選択すると、送信ボタンは「無効」状態、すなわちグレー表示され、「いいえ！私がマウスポインタを置いたときにマウスポインタ私がそれをクリックすると、それは正常に動作していることを示唆する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

私はこの問題の解決策（ある種の）を発見しました。基本的には、必要な属性を削除した直後に、テキストボックスのblurイベントを明示的に起動します。これにより、検証が強制的にフィールドを再度確認し、フィールドが不要であることが分かり、空白の値が有効になり、送信ボタンが有効な状態になります。

更新の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を作ることになるだろう。表示は、noneまたはshowのいずれかになります。 基本的にDOM要素が読み込まれ、表示または非表示に基づいてスタイルが変更されます。この代わりに、DOM要素をスクリプトにロードしないでください。