Question

我正在尝试使用jQuery Form Validator（http://www.formvalidator.net/index.html）创建一个验证表单。我想验证元素type="radio"。如果您未选择任何选项，则会显示一条消息Please select a option。这是我的HTML代码：

<form id="form">
    <label class="form__box--label" for="radio">What type of prototype do you need?</label> <br>
            <div>
                <input id="basic" class="form__box--radio" type="radio" name="radio"  value="Basic">
                <label class="form__box--option" for="basic">
                  Basic
                </label>
              </div>
              <div>
                <input id="premium" class="form__box--radio" type="radio" name="radio" value="premium">
                <label class="form__box--option" for="premium">
                  Premium
                </label>
              </div>


            <input type="submit" class="sectionform__form--button" value="Get an estimation">
          </form>

这是js代码：

$(document).ready(function(){
  $.validate({
   modules: 'html5',
    {
    rules:    {
      radio:{ required:true }
    },
    messages:
    {
      radio:
      {
        required:"Please select a option<br/>"
      }
    },
    errorPlacement: function(error, element)
    {
        if ( element.is(":radio") )
        {
            error.appendTo( element.parents('.sectionform__form--box') );
        }
        else
        { // This is the default behavior
            error.insertAfter( element );
        }
     }
    }
  });

});

Answer 1

您可以按以下方式使用。

<form id="form">
    <label class="form__box--label" for="radio">What type of prototype do you need?</label> <br>
    <div>
        <input id="basic" class="form__box--radio" type="radio" name="radio"  value="Basic" data-validation="required" data-validation-error-msg="Please select a option">
        <label class="form__box--option" for="basic">
            Basic
        </label>
    </div>
    <div>
        <input id="premium" class="form__box--radio" type="radio" name="radio" value="premium" data-validation="required" data-validation-error-msg="Please select a option">
        <label class="form__box--option" for="premium">
            Premium
        </label>
    </div>
    <input type="submit" class="sectionform__form--button" value="Get an estimation">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
    $(document).ready(function () {
        $.validate({
            modules: 'html5',
            rules: {
                radio: {required: true}
            },
            messages:{
                radio:{ required: "Please select a option<br/>" }
            },
            errorPlacement: function (error, element)
            {
                if (element.is(":radio")){
                    error.appendTo(element.parents('.sectionform__form--box'));
                }
                else { // This is the default behavior
                    error.insertAfter(element);
                }
            }
        });
    });
</script>

Answer 2

用以下代码替换您的JS代码：

$('#form').validate({
   rules: {
     radio:{ required:true }
   },
   messages:
   {
     radio:
     {
       required:"Please select a option<br/>"
     }
   },
   errorPlacement: function(error, element)
   {
       if ( element.hasClass("form__box--radio") )
       {
          error.insertAfter( element.next('label') );
       }
       else
       { // This is the default behavior
          error.insertAfter( element );
       }
    }
   }
});

验证输入类型单选

2 个答案: