Плагин проверки jQuery addMethod

Question

Я пытаюсь использовать плагин проверки jQuery для проверки нескольких полей формы с помощью пользовательского add.method, и мне нужна помощь с этим. Вот моя HTML-форма.

<form method="post" action="<?=$PHP_SELF?>" name="sf" id="sf">

 <p>
 <label for="name">Name:</label>
   <input type="text" name="name"  id="name" /><br />
 </p>

 <p>
 <label for="email">Email:</label>
   <input type="text" name="email"  id="email" /><br />
 </p>

</form>

По сути, я пытаюсь очень простое правило, чтобы проверить, не является ли поле Имя не пустым. Я пытаюсь следовать, пожалуйста, дайте мне знать, если это правильно?

<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("name",function(value,element){
    return this.optional(element) || (i.test(value) > 0);
    },"Name is required");         
        $("#sf").validate({
                rules: {
                name: true,
                },
        });
    });
</script>

Я хочу отобразить сообщение об ошибке имени перед полем Имя в форме. Как я могу это сделать? Спасибо за любую помощь.

Answer 1

Если вы просто хотите сделать обязательным элемент формы, вы должны добавить класс required для элемента:

<input type="text" name="name"  id="name" class="required" />

Это будет автоматически получено при валидации.

Если вы делаете это только для того, чтобы выяснить, как добавить пользовательское правило, я бы рекомендовал не использовать правило с именем "name" (у меня были проблемы с ним в простом примере). Вот как вы можете добавить пользовательское правило, которое гарантирует, что «имя» состоит только из символов:

$.validator.addMethod("customname", function(value, element) {
    var i = /^[A-Za-z]+$/;
    return this.optional(element) || (i.test(value) > 0);
}, "Name is required");

$("#sf").validate({
    rules: {
        name: {
            customname: true
        }
    }
});

Обратите внимание, что внутри объекта rules необходимо указать другой объект (name), который определяет правила для этого элемента.

Что касается размещения ошибки в определенном месте, проверьте параметр errorPlacement:

errorPlacement: function(error, element) {
    element.closest("p").prepend(error);
}

Поместит ошибку между меткой и input.

Вот пример двух в действии: http://jsfiddle.net/andrewwhitaker/7xD2H/

Answer 2

Это выполнит то, что вы пытаетесь сделать:

 $(document).ready( function() {
     $('#sf').validate();
     $("#name").rules("add", {
         required: true,
         minlength: 0,
         messages: {
             required: "Name is required"               
         }
     });
 });