Question

我有一个带有ratable选项的表单作为单选按钮。我想要实现的目标如下：

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

我的代码来了：

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/

另请注意，要禁止显示错误消息，您应该在return false回调函数内置errorPlacement而不是将其留空。

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(); },

DEMO 2：http://jsfiddle.net/a05jrdau/14/

jQuery Validate：更改错误放置的行为

1 个答案: