使用Jquery显示控件的错误消息

时间:2015-03-11 03:10:35

标签: javascript jquery html css html5

脚本:Jquery 我是jquery的新手,我发现这段代码我试过但没有成功。它使用jquery验证器插件。这是代码:

<html>
<body>

<form id="employment-application" method="post">

    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>


<script>
$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});

</script>
</body>
</html>

我如何实现这一目标?这是链接http://jsfiddle.net/cMhQ7/

2 个答案:

答案 0 :(得分:1)

看起来像您正在使用的验证器插件版本导致问题。请尝试以下http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js

或页面jqueryvalidation.org hotlink

中的任何内容

我希望这可以解决问题。

答案 1 :(得分:0)

试试这个

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="employment-application" method="post">
    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});
</script>
</body>
</html>
相关问题