单选按钮上的错误消息定位 JQuery 验证

Question

我有一个单选按钮，只能选中一个。然而，错误消息显示在错误的地方，它显示在第一个单选按钮 "walk in" 上。我希望它显示在单选按钮的选择下，在单选按钮 "under" 下。

这是我的代码

<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

这里是我的 Fiddle - 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) {

  }
});

单选按钮上的错误消息定位 JQuery 验证

Error message positioning on radio button JQuery Validation

javascript

jquery

jquery-validate