ラジオボタンの周りにエラーを表示

Question

Jquery Validationプラグインのドキュメントでは、少なくとも1つのラジオボタンが選択されていることを確認できます。しかし、いくつかの余分なレイアウトでそれをしようとすると、私はエラーを強調表示されていません。

私のコードは次のようになります。

<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"); 
    }, 
}); 

has-errorクラスはラジオボタングループに適用されません。

Answer 1

私はjQueryの検証によって生成されたエラーメッセージが右既定で無効な要素...後positionnedさ...

をあなたはthis CodePenで持っているエラーを再現。

errorPlacementを使用して、エラーメッセージを別の場所に配置できます。

このSolutionでは、私はちょうど親.input-groupの直後に配置しました。私はあなたが探しているパズルピースだと確信しています。
;）

あなたの完全なコードで

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

---

EDIT

、それが動作するように簡単です...
;）

でbuttonのデフォルトの動作formが提出されます（Reference、「type」を参照）。
したがって、typeが省略されている場合は、そのとおりです。

.validate()機能はbutton type="button"によってトリガーされません。

So ...
最初に検証するには、デフォルトのsubmitを防止する必要があります。
フォームが有効な場合は、提出してください。

これは.preventDault()と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]を、それを修正することによって達成されます。上記のエラーメッセージの配置に関する助けをありがとうございます。それは私の最初の問題ではなかったが、一度表示するとエラーが出てしまった。あなたの修正は素晴らしいです。

私の主な問題は、ラジオボタンをかわいらしいフォントですばらしいアイコンに変えるスタイルとのCSS衝突です。デフォルトのラジオボタンを隠す小さなスニペットは、表示されるフィールドのみを検索する必要があるため、検証が失敗します。代わりに高さをゼロに設定して、これまでのところうまくいくように思えます。

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