错误消息定位单选按钮jQuery验证

问题描述：

我有一个单选按钮，只有一个应该检查。然而，错误信息显示在错误的地方，它显示在第一个单选按钮上，即“走入”。我希望它显示在单选按钮“下”下的单选按钮的选项下。错误消息定位单选按钮jQuery验证

这里是我的代码

<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代码。

我没有看到任何错误消息。 – nashcheez

__但错误信息显示在错误的地方_ 你的问题和标题之间有任何关系吗？ –

我忘了更改标题，前一段时间我有一个不同的错误。我会改变它。 – AyakoS

答

这里我的小提琴 - 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   
     } 
     });

答

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

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

答

$("#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) { 

    } 
});

错误消息定位单选按钮jQuery验证

相关推荐