Fehler in der Umgebung der Optionsfelder anzeigen

Question

Die Jquery Validation-Plugin-Dokumentation besagt, dass Sie bestätigen können, dass mindestens ein Optionsfeld ausgewählt ist. Wenn ich dies jedoch mit einem zusätzlichen Layout versuche, bekomme ich keine Fehlermarkierung.

Mein Code sieht wie folgt aus.

<div class="form-group" style="margin-top:25px;"> 
    <label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label> 
    <div class="input-group"> 
     <span class="input-group-addon"> 
      <i class="glyphicon glyphicon-envelope"></i> 
     </span> 
     <div class="form-control" style="height:auto;"> 
      <div class="radio"> 
       <label class="noBold-text" style="font-size: 1em"> 
        <input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email 
        <span class="cr"><i class="cr-icon fa fa-circle"></i></span> 
       </label> 
      </div> 
      <div class="radio"> 
       <label class="noBold-text" style="font-size: 1em"> 
        <input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone 
        <span class="cr"><i class="cr-icon fa fa-circle"></i></span> 
       </label> 
      </div> 
     </div> 
    </div> 
</div> 

$("#forgotPasswordForm").validate({ 
    rules: { 
     fpUsername: { 
      required: true, 
      minlength: 3 
     }, 
     factorSelect: { 
      required: true 
     } 
    }, 
    messages: { 
     fpUsername: { 
      required: "Please enter your username or email", 
      minlength: "Your username must be at least {0} characters" 
     }, 
     factorSelect: { 
      required: "You must select a recovery method" 
     }, 
    }, 
    highlight: function (element, errorClass, validClass) { 
     $(element).parents(".form-group").addClass("has-error").removeClass("has-success"); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).parents(".form-group").addClass("has-success").removeClass("has-error"); 
    }, 
}); 

Die has-error-Klasse wird nie auf die Optionsfeldgruppe angewendet.

Answer 1

reproduziert ich den Fehler, den Sie in this CodePen haben ...

Die Fehlermeldung von jQuery Validate erzeugt wird, direkt nach dem ungültigen Element positionned ... Welche ist die Standardeinstellung.

Jetzt können Sie diese Fehlermeldung an anderer Stelle positionieren, indem Sie errorPlacement verwenden.

In diesem Solution, ich habe es gerade nach dem Elternteil .input-group platziert. Ich bin sicher, das ist das Puzzlestück, nach dem du suchst.
;)

errorPlacement: function(errorLabel, invalidElement){ 
    if($(invalidElement).is("[type='radio']")){ 
    var inputGroup = $(invalidElement).closest(".input-group"); 
    inputGroup.after(errorLabel); 
    } 
}, 

---

EDIT

mit Ihrer vollständigen Code, das einfacher ist, zu arbeiten ...
;)

Das Standardverhalten eines button in ein form ist einzureichen (Reference, siehe "Typ").
Also, wenn die type weggelassen wird, ist es das, was es tut.

Und die .validate() Funktion wird nicht von button type="button" ausgelöst.

So ...
Sie müssen den Standard submit verhindern, um zuerst zu validieren.
Dann senden, wenn das Formular gültig ist.

Dies wird erreicht durch .preventDault() und submitHandler

$("#forgotPasswordForm").on("submit",function(e){ 
    e.preventDefault(); // Prevents the default form submit (Have to validate first!) 
}) 
    .validate({ 

    // Skipping some lines here... 

    submitHandler: function(form) { 
    form.submit(); // Submits only if the form is valid 
    } 
}); 

Updated CodePen

Answer 2

Ok, es fixiert. Vielen Dank für die Hilfe oben mit der Platzierung der Fehlermeldung. Das war nicht mein anfängliches Problem, aber es kam, nachdem ich den Fehler überhaupt angezeigt bekommen hatte. Deine Lösung funktioniert großartig.

Mein Hauptproblem war ein CSS-Konflikt mit einigen Stilen, die die Radiobuttons in hübsche font-awesome Icons verwandelten. Das kleine Snippet, das die standardmäßigen Optionsfelder verbirgt, führt dazu, dass die Validierung fehlschlägt, da nur nach sichtbaren Feldern gesucht werden muss. Ich setze stattdessen die Höhe auf Null und bisher scheint es zu funktionieren.

.checkbox label input[type="checkbox"], 
.radio label input[type="radio"] { 
    /*display: none;*/ 
    height:0; 
}