单选按钮 JQuery Validation 上的错误消息定位答案

【问题标题】：Error message positioning on radio button JQuery Validation单选按钮 JQuery Validation 上的错误消息定位
【发布时间】：2017-02-28 09:17:55
【问题描述】：

我有一个单选按钮，只有一个应该被选中。但是错误消息显示在错误的位置，它显示在第一个单选按钮上，即“walk in”。我希望它显示在单选按钮的选择下，在单选按钮“下”下。

这是我的代码

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

【问题讨论】：

我没有看到任何错误消息。
但是错误信息显示在错误的地方你的问题和标题之间有什么关系吗？
我忘记更改标题了，前段时间我遇到了另一个错误。我会改的。
无法重现该问题。添加您的完整代码
代码在我在 JSFiddle 中给出的链接中。无论如何，这里是：jsfiddle.net/19sksaex

标签： javascript jquery jquery-validate

【解决方案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         
      }
      });

【讨论】：

【解决方案2】：

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

  }
});

【讨论】：

【解决方案3】：

我已经对你的脚本做了一些修改，看看你是否想要这样

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

【讨论】：