Question

Jquery Validation插件文档说您可以验证至少选择了一个单选按钮。但是，当尝试使用一些额外的布局时，我没有收到错误突出显示。

我的代码看起来像这样。

<div class="form-group" style="margin-top:25px;">
    <label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-envelope"></i>
        </span>
        <div class="form-control" style="height:auto;">
            <div class="radio">
                <label class="noBold-text" style="font-size: 1em">
                    <input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email
                    <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                </label>
            </div>
            <div class="radio">
                <label class="noBold-text" style="font-size: 1em">
                    <input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone
                    <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                </label>
            </div>
        </div>
    </div>
</div>

$("#forgotPasswordForm").validate({
    rules: {
        fpUsername: {
            required: true,
            minlength: 3
        },
        factorSelect: {
            required: true
        }
    },
    messages: {
        fpUsername: {
            required: "Please enter your username or email",
            minlength: "Your username must be at least {0} characters"
        },
        factorSelect: {
            required: "You must select a recovery method"
        },
    },
    highlight: function (element, errorClass, validClass) {
        $(element).parents(".form-group").addClass("has-error").removeClass("has-success");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents(".form-group").addClass("has-success").removeClass("has-error");
    },
});

has-error类永远不会应用于单选按钮组。

Answer 1

我在this CodePen ...

中重现了您的错误

jQuery Validate生成的错误消息位于无效元素后面......这是默认值。

现在，您可以使用errorPlacement将错误消息放在其他位置。

在这个Solution中，我只是将它放在父.input-group之后。我确定那是你寻找的拼图 ;）

errorPlacement: function(errorLabel, invalidElement){
  if( $(invalidElement).is("[type='radio']") ){
    var inputGroup = $(invalidElement).closest(".input-group");
    inputGroup.after(errorLabel);
  }
},

<小时/> 的修改

使用完整的代码，更容易使用...
;）

button中form的默认行为是提交（Reference，请参阅＆＃34;输入＆＃34;）。
因此，如果省略type，那就是它的作用。

而.validate()功能并非由button type="button"触发。

所以...
您必须先阻止默认submit才能先验证然后，提交表格是否有效。

这是通过.preventDault()和submitHandler

实现的

$("#forgotPasswordForm").on("submit",function(e){
  e.preventDefault(); // Prevents the default form submit (Have to validate first!)
})
  .validate({

    // Skipping some lines here...

    submitHandler: function(form) {
    form.submit();  // Submits only if the form is valid
  }
});

Updated CodePen

Answer 2

好的，修好了。感谢上面的帮助，显示错误消息的位置。这不是我最初的问题，但是一旦我得到错误就显示出来了。你的修复效果很好。

我的主要问题是与某些样式的CSS冲突，这些样式将单选按钮变成漂亮的字体 - 真棒图标。隐藏默认单选按钮的小片段会导致验证失败，因为它只能查找可见字段。我将高度设置为零，到目前为止似乎有效。

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    /*display: none;*/
    height:0;
}

在单选按钮周围显示错误

2 个答案: