jQuery Validate:改变错误放置的行为

我有一个表单，可选选项作为单选按钮。我想达到的目标如下:

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

小提琴来了:http://jsfiddle.net/a05jrdau/9/

下面是我的代码:

<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" } )});

当输入元素是radio时，您只需要有条件地针对父元素。使用highlight和unhighlight回调函数覆盖默认行为

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永远不能清除错误消息，因为它永远不会在表单有效或任何其他触发事件时被调用。

您将使用showErrors回调而不是…

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/

相关内容

最新更新

热门标签：