HTML/Bootstrap-Validierung sagt ungültig, wenn Formular gültig ist

Question

Ich habe ein HTML-Formular mit Bootstrap. Auf diesem Formular habe ich eine Auswahlliste (Pflichtfeld). Wenn der Benutzer die Option "Andere" aus dieser Liste auswählt, habe ich ein verstecktes Texteingabefeld (einzelne Zeile), das dann für den Benutzer angezeigt wird, um weitere Details zur Verfügung zu stellen. Diese Texteingabe ist nur dann ein Pflichtfeld, wenn sie sichtbar ist - das JavaScript, das sie ein-/ausblendet, fügt auch das Attribut "required" hinzu oder entfernt es.

Das funktioniert in Ordnung. Wenn ich "Andere" aus dem Dropdown wähle, wird das Textfeld angezeigt. Wenn ich dort keinen Wert eintrage, erhalte ich den Validierungsfehler, den ich erwarten würde. Das Problem ist, dass, wenn ich andere auswähle, zeige das Textfeld an, lege den Fokus in das Textfeld und dann heraus (so wird die Validierungsfehlermeldung angezeigt) und wähle dann einen anderen Wert aus der Auswahlliste aus, ohne einen Wert in den zu geben Textfeld. Es verbirgt das Textfeld und entfernt das Attribut "required" wie erwartet. Das Formular ist dann gültig - wenn ich auf die Schaltfläche "Senden" klicke, wird es wie erwartet gesendet.

Das Problem scheint mit dem CSS zu sein (möglicherweise von der Bootstrap-Validierung?). Nachdem ich einen anderen Wert aus der Auswahlliste ausgewählt habe, um das Textfeld auszublenden, bleibt der Übergabeknopf im "ungültigen" Zustand, d. H. Ausgegraut und mit "Nein!" Mauszeiger, wenn ich den Mauszeiger darüber bewege. Wenn ich darauf klicke, wird OK angezeigt, was darauf hindeutet, dass es richtig funktioniert, aber es sieht einfach nicht so aus, was aus der Sicht eines Benutzers nicht ideal ist.

Wenn ich es in den Entwicklertools des Browsers betrachte, kann ich sehen, dass die Klasse "disabled" immer noch auf die Schaltfläche "submit" angewendet wird, nachdem das Attribut "required" aus dem Textfeld entfernt wurde, obwohl das Formular gültig ist. Ich könnte möglicherweise ein wenig Javascript in das oben gezeigte Änderungsereignis einfügen, um dieses Attribut zu entfernen, wenn dieses Textfeld ausgeblendet wird, aber das wäre ein Problem, wenn andere Felder im Mix vorhanden sind, selbst wenn dieses Feld gültig ist ungültige Felder auf der Seite, für die die Übergabeschaltfläche deaktiviert sein muss

HTML und 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

Ich habe (eine Art) eine Lösung für dieses Problem gefunden. Grundsätzlich feuere ich explizit das Unschärfereignis in der Textbox sofort nach dem Entfernen des erforderlichen Attributs ab. Dies zwingt die Validierung dann, das Feld erneut zu überprüfen, es merkt dann, dass das Feld nicht benötigt wird und somit ein leerer Wert gültig ist, und setzt somit den Übergabeknopf in seinen gültigen Zustand.

Aktualisiert 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

Wenn Sie Show mit() & hide() Methoden in jeder Skriptsprache, gehen seine sein Stil (CSS) changes.i.e machen. Die Anzeige wird entweder nicht angezeigt oder angezeigt. Also im Grunde wird DOM-Element geladen und es wird nur Stil Änderungen basierend auf zeigen oder ausblenden. Laden Sie stattdessen das DOM-Element nicht im Skript.