jQuery验证div中的显示错误消息

时间:2014-04-11 04:59:15

标签: javascript jquery jquery-validate

我是jQuery验证和学习的新手,所以我对此一无所知。现在我使用jQuery Validate plugin并想在div元素中显示错误消息。我为每条错误消息创建了div。

例如,我有名称输入字段,并希望在nameError div。

中显示错误消息
<div>
    <label for="name">Name</label>
    <input id='name' name="name" value="" />
</div>
<div id="nameError">
    <!-- Display Name Error Here  -->
</div>

jQuery Validation插件是否可能?我不知道为什么我要在这里发帖以获得你的帮助。

我的JQUERY代码是:

$(function () {
    $.validator.addMethod("regex", function (value, element, regexpr) {
        return regexpr.test(value);
    }, "Please enter a valid name.");

    $("#myForm").validate({
        rules: {
            name: {
                required: true,
                regex: /^[A-Za-z]+$/
            }
        }
    });
});

MY JSFIIDLE

感谢。

3 个答案:

答案 0 :(得分:7)

以下是一个快速示例:http://jsfiddle.net/4PuJL/7/

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo('#nameError');
    }
});

答案 1 :(得分:4)

您可以在errorPlacement处理程序中添加一个检查,如下所示: 请注意,每个错误都会调用errorPlacement函数,如果您需要更多处理错误消息,请检查invalidHandler

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        if (element.attr("name") == "name" )  //Id of input field
            error.appendTo('#nameError');
        if (element.attr("name") == "anotherInputField" )  //Id of input field
            error.appendTo('#anotherInputFieldError');
    }
});

答案 2 :(得分:2)

检查以下链接

My Fiddle

HTML:

<form>
    <input type="text" required pattern="/^[A-Za-z]+$/" >
        <input type="submit" value="search">
</form>