jQuery 验证：更改错误放置的行为

Question

我有一个表单，其中包含作为单选按钮的可评分选项。我想要实现的目标如下：

如果一个选项还没有被评级，我希望父级 div "option-group" 有一个红色边框。对选项进行评级后，我希望红色边框消失。到目前为止，我还没有找到解决办法。
如果错误消息可见并且所有必填字段都已填写，那么我希望错误消息立即消失。

fiddle 来了： http://jsfiddle.net/a05jrdau/9/

这是我的代码：

HTML

<form id="my-form" action="" method="post">
    <div id="msg-error"></div>
    <input type="text" id="myInput" name="myInput"/>
    <div class="option-con">
        <div class="option-label">
            Option 1
        </div>
        <div class="option-row">
            <input type="radio" name="radioOption1" value="1"/> 1
            <input type="radio" name="radioOption1" value="2"/> 2
            <input type="radio" name="radioOption1" value="3"/> 3
        </div>
    </div>
    <div class="option-con">
        <div class="option-label">
            Option 2
        </div>
        <div class="option-row">
            <input type="radio" name="radioOption2" value="1"/> 1
            <input type="radio" name="radioOption2" value="2"/> 2
            <input type="radio" name="radioOption2" value="3"/> 3
        </div>
    </div>
    <br>
    <br>
    <input type="submit" value="Test" />
</form>

CSS:

.option-con {
    width: 100%;
    float: left;
}

.option-label, .option-row {
    float: left;
}

.option-row {
    margin-left: 10px;
}

.error {
    border: 1px solid red;
}

JS:

jQuery(function ($) {
    $('#my-form').validate({
                debug: true,
                rules: {
                    myInput: {
                        required: true
                    },
                    radioOption1: {
                        required: true
                    },
                    radioOption2: {
                        required: true
                    }
                },
                invalidHandler: function (event, validator) {
                    if (validator.errorList.length > 0) {
                        $('#msg-error').empty().html('Please fill in required fields.').show();

                    } else {
                        $('#msg-error').hide();
                    }
                },
                errorClass: "error"
            }
    )});

Answer 1

当输入元素是 radio 时，您只需要有条件地定位父元素。使用 the highlight and unhighlight callback functions 覆盖默认行为。

highlight: function (element, errorClass, validClass) {
    var target;
    if ($(element).is(':radio')) {
        target = $(element).parent('div');
    } else {
        target = $(element);
    };
    target.addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
    var target;
    if ($(element).is(':radio')) {
        target = $(element).parent('div');
    } else {
        target = $(element);
    };
    target.addClass(validClass).removeClass(errorClass);
},

工作演示：http://jsfiddle.net/a05jrdau/10/

另请注意，要抑制错误消息，您应该在 errorPlacement 回调函数中放置一个 return false 而不是将其留空。

errorPlacement: function (error, element) {
    return false;
},

您也不需要 errorClass: "error"，因为 "error" 是默认设置。

编辑:

您的错误消息未在有效表单上清除，因为您试图在 invalidHandler 中执行此操作，只有当表单无效且您单击按钮时才会触发。 invalidHandler 永远无法清除错误消息，因为当表单有效时或任何其他触发事件都不会调用它。

您可以使用 the showErrors callback 代替...

showErrors: function (errorMap, errorList) {
    var msgerror = "All fields are required.";
    if (this.numberOfInvalids() > 0) {
        $('#msg-error').empty().html(msgerror).show();
    } else {
        $('#msg-error').hide();
    };
    this.defaultShowErrors();
},

演示 2：http://jsfiddle.net/a05jrdau/14/

jQuery 验证：更改错误放置的行为

jQuery Validate: change behaviour of error placement

javascript

jquery

jquery-validate