错误消息在单选按钮上定位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         
      }
      });

这是jsfiddle中的代码。

Answer 1

在这里我的小提琴 - https：//jsfiddle.net/skyr99999/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

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

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