不知道为什么我的div没有显示验证消息

时间:2011-04-11 16:35:50

标签: jquery html jquery-validate

Ello堆栈,Cant似乎弄清楚为什么在验证字段后我的div中没有​​显示任何文本。这是我的代码。我知道验证正在运行但是,我不确定为什么我的验证消息没有显示在div中。

<html>
<head>
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="http://localhost:62147/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        "use strict";
        $(document).ready(function () {

            $("#testerbtn").bind("click", function () {
                alert("onclick is fired");
                $("#myform").validate({
                    errorLabelContainer: $("#Errors"),
                    rules: {
                        textToVal: { required: true }
                    },
                    messages: {
                        textToVal: "the field is required! nub~!"
                    }
                });
                alert("validation should have happend.");

            })
        });

    </script>
    <title>Test Page</title>
</head>
<body>
    <form id = "myform" action="htmlPage1.htm">
         <div id="Errors"></div>
        <div>
            <input type="text" id="textToVal"  value="" />
            <input type="button" id="testerbtn"  value="Tester" />
        </div>
    </form>
</body>
</html>

2 个答案:

答案 0 :(得分:7)

我在这里看到的一些事情可能会导致问题:

  1. 确保input具有name属性:

    <input type="text" id="textToVal"  value="" name="textToVal" />
    
  2. validate()应在点击处理程序的外部实例化。另外,将button类型更改为submit以自动触发验证码。

  3. 总结:

    <强> JavaScript的:

    $(document).ready(function () {
        $("#myform").validate({
            errorLabelContainer: $("#Errors"),
            rules: {
                textToVal: {
                    required: true
                }
            },
            messages: {
                textToVal: "the field is required! nub~!"
            }
        });
    });
    

    <强> HTML

    <form id = "myform" action="htmlPage1.htm">          
        <div id="Errors"></div>         
        <div>             
            <input type="text" id="textToVal"  value="" name="textToVal" />             
            <input type="submit" id="testerbtn"  value="Tester" />         
        </div>     
    </form>
    

    工作示例:http://jsfiddle.net/fJ8XF/

答案 1 :(得分:0)

HI Terrance,

我相信errorLabelContainer是一个选择器(字符串),所以你应该使用 “#Errors”代替$('#Errors')