Проверка формы jQuery при нажатии кнопки

У меня есть простая страница с формой и кнопкой вне формы. Я пытаюсь проверить форму нажатием кнопки. Я добавил правила для проверки формы в функции document.onready. Однако форма не проверяется.

HTML: -

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS: -

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },
   messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

Любая идея, что не так?

Ответ 1

В вашем обработчике click ошибка - это метод .validate(); он только инициализирует плагин, он не проверяет form.

Чтобы устранить необходимость иметь кнопку submit в form, используйте .valid(), чтобы запустить проверку проверки...

$('#btn').on('click', function() {
    $("#form1").valid();
});

jsFiddle Demo

.validate() - для инициализации плагина (с параметрами) один раз в готовности DOM.

.valid() - проверить состояние проверки (логическое значение) или запустить тест проверки на form в любое время.

В противном случае, если у вас была кнопка type="submit" в контейнере form, вам не понадобится специальный обработчик click и метод .valid(), так как плагин автоматически захватит это.

Демо без click обработчика

ИЗМЕНИТЬ

У вас также есть две проблемы в вашем HTML...

<input id="field1" type="text" class="required">

Вам не нужно class="required" при объявлении правил в .validate(). Это избыточно и излишне.
Атрибут name отсутствует. Правила объявляются в .validate() их name. Плагин зависит от уникальных атрибутов name, чтобы отслеживать входы.

Должно быть...

<input name="field1" id="field1" type="text" />

Ответ 2

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

<form id="form1" name="form1">
     Field 1: <input id="field1" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>

Вы также используете type = "button". И я не уверен, почему вы должны отделить кнопку отправки, поместить ее в форму. Правильнее это делать. Это должно работать.