錯誤消息定位單選按鈕jQuery驗證

Question

我有一個單選按鈕，只有一個應該檢查。然而，錯誤信息顯示在錯誤的地方，它顯示在第一個單選按鈕上，即「走入」。我希望它顯示在單選按鈕「下」下的單選按鈕的選項下。

這裏是我的代碼

<form class="form-horizontal" id="formApplication" role="form"> 
    <div class="form-group"> 
     <div class="col-sm-2"> 
      <input type="radio" name="rbtnFind" id="rbtnWalkIn" value="Walk-In"> Walk-In 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-2"> 
      <input type="radio" name="rbtnFind" id="rbtnJobFair" value="Job Fair"> Job Fair 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-2"> 
      <input type="radio" name="rbtnFind" id="rbtnSocialMedia" value="Social Media"> Social Media 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-2"> 
      <input type="radio" name="rbtnFind" id="rbtnReferred" value="Referred"> Referred 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-2"> 
       <input type="radio" name="rbtnFind" id="rbtnOther" value="Other"> Other 
     </div> 
    </div> 
    <button type="submit" class="btn pull-right" id="btnContinue1">Continue</button> 
    </form> 

而且JQuery的

$("#formApplication").submit(function(e){ 
    e.preventDefault(); 
}).validate({ 
    rules:{ 
     rbtnFind: "required" 
    }, 
    messages: { 
     rbtnFind: "Please select an option" 
    }, 
    highlight: function(element){ 
     if($(element).attr('type') == 'radio'){      
      $(element.form).find("input[type=radio]").each(function(which){ 
       $(element).closest('.form-group').addClass('has-error'); 
      }); 
        } 
     else { 
      $(element).closest('.form-group').addClass('has-error'); 
     }   
    }, 
    unhighlight: function(element){ 
     $(element).closest('.form-group').removeClass('has-error'); 
    }, 
    errorElement: 'span', 
    errorClass: 'help-block', 
    errorPlacement: function(error, element) { 
     if(element.parent('.input-group').length) { 
       error.insertAfter(element.parent()); 
     } else { 
       error.insertAfter(element); 
     } 
     }, 
     submitHandler: function(form) { 
      //submit code   
     } 
     }); 

Here是的jsfiddle代碼。

Answer 1

這裏我的小提琴 - https://jsfiddle.net/skyr9999/8nm3tvph/我希望它可以幫助你，我做的JS和添加佔位符更改HTML：

$("#formApplication").submit(function(e){ 
    e.preventDefault(); 
}).validate({ 
    rules:{ 
     rbtnFind: "required" 
    }, 
    messages: { 
     rbtnFind: "Please select an option" 
    }, 
    highlight: function(element){ 
     if($(element).attr('type') == 'radio'){      
      $(element.form).find("input[type=radio]").each(function(which){ 
       $(element).closest('.form-group').addClass('has-error'); 
      }); 
        } 
     else { 
      $(element).closest('.form-group').addClass('has-error'); 
     }   
    }, 
    unhighlight: function(element){ 
     $(element).closest('.form-group').removeClass('has-error'); 
    }, 
    errorElement: 'span', 
    errorClass: 'help-block', 
    errorPlacement: function(error, element) { 
     $(".error_placeholder").html(error.html()); 
     }, 
     submitHandler: function(form) { 
     $(".error_placeholder").html(""); 
      //submit code   
     } 
     }); 

Answer 2

我做了一些更改劇本，看看你是否想用那種方式

<form class="form-horizontal" id="formApplication" role="form"> 
    <div class="form-group"> 
    <div class="col-sm-2"> 
     <input type="radio" name="rbtnFind" id="rbtnWalkIn" value="Walk-In"> Walk-In 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-2"> 
     <input type="radio" name="rbtnFind" id="rbtnJobFair" value="Job Fair"> Job Fair 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-2"> 
     <input type="radio" name="rbtnFind" id="rbtnSocialMedia" value="Social Media"> Social Media 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-2"> 
     <input type="radio" name="rbtnFind" id="rbtnReferred" value="Referred"> Referred 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-2"> 
     <input type="radio" class="errorPlacement" name="rbtnFind" id="rbtnOther" value="Other"> Other 
    </div> 
    </div> 

    <div id="divFindFollowUp" class="form-group"> 
    <!-- For the follow up for the question above --> 
    </div> 
    <button type="submit" class="btn pull-right" id="btnContinue1">Continue</button> 
</form> 
<script> 
    $("#formApplication").submit(function(e) { 
     e.preventDefault(); 
    }).validate({ 
     rules: { 
     rbtnFind: "required" 
     }, 
     messages: { 
     rbtnFind: "Please select an option" 
     }, 
     highlight: function(element) { 
     if ($(element).attr('type') == 'radio') { 
     $(element.form).find("input[type=radio]").last().closest('.form-group').addClass('has-error'); 
     } else { 
      $(element).closest('.form-group').addClass('has-error'); 
     } 

     //$(element).closest('.form-group').addClass('has-error'); 
     }, 
     unhighlight: function(element) { 
     $(element).closest('.form-group').removeClass('has-error'); 
     }, 
     errorElement: 'span', 
     errorClass: 'help-block', 
     errorPlacement: function(error, element) { 
     if ($(element).attr('type') == 'radio') { 
     error.insertAfter($(".errorPlacement").parent()); 
     } 
     else{ 
     if (element.parent('.input-group').length) { 
      error.insertAfter(element.parent()); 
     } else { 
      error.insertAfter(element); 
     } 
     } 
     }, 
     submitHandler: function(form) { 

     } 
    }); 
</script> 

Answer 3

$("#formApplication").submit(function(e) { 
    e.preventDefault(); 
}).validate({ 
    rules: { 
    rbtnFind: "required" 
    }, 
    messages: { 
    rbtnFind: "Please select an option" 
    }, 
    highlight: function(element) { 
    if ($(element).attr('type') == 'radio') { 
     $(element.form).find("input[type=radio]").each(function(which) { 
     $(element).closest('.form-group').addClass('has-error'); 
     }); 
    } else { 
     $(element).closest('.form-group').addClass('has-error'); 
    } 

    //$(element).closest('.form-group').addClass('has-error'); 
    }, 
    unhighlight: function(element) { 
    $(element).closest('.form-group').removeClass('has-error'); 
    }, 
    errorElement: 'span', 
    errorClass: 'help-block', 
    errorPlacement: function(error, element) { 
    if (element.parent('.input-group').length) { 
    error.insertAfter(element.parent()); 
    } else { 
    console.log(error); 
     error.insertAfter('.has-error'); //Replace has-error with element 
    } 
    }, 
    submitHandler: function(form) { 

    } 
});