Не уверен, почему мой div не показывает сообщения о проверке

#jquery #html #jquery-validate

#jquery #HTML #jquery-validate

Вопрос:

Элло стек, похоже, не могу понять, почему в моем 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>

1. .validate() Есть обратный вызов?

2. Вы уверены, что проверка запущена? Потому что, если это скопировано, вы "use strict"; случайным образом разместили в начале вашего скрипта.

3. "use scrict" это не случайная строка. Прочитайте о строгом режиме здесь: developer.mozilla.org/en/JavaScript/Strict_mode

Ответ №1:

Здесь я вижу пару вещей, которые могут вызывать проблемы:

Убедитесь, что у ваших input файлов есть name атрибуты:
```
 <input type="text" id="textToVal"  value="" name="textToVal" />
  
```
validate() должен быть создан экземпляр вне вашего обработчика кликов. Кроме того, измените свой button тип на submit , чтобы автоматически запускать код проверки.

В итоге:

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 /

Ответ №2:

ПРИВЕТ, Терренс,

Я полагаю, что errorLabelContainer это должен быть селектор (строка), поэтому вы должны использовать « #Errors » вместо $('#Errors')