jQuery Подтвердить плагин с добавленными пользовательскими методами и сообщениями об ошибках

Question

Вот ссылка на JSFIDDLE.

Здравствуйте

Я учусь валидатор плагин JQuery и его API. Я почти там, но, похоже, не могу найти убедительного примера в отношении решения, которое я хотел бы реализовать. Я сделал много онлайн-поиска и нашел фрагменты, но ничего не объясняет это хорошо.

У меня есть простой формы с этими полями:

• Имя
• Фамилия
• Электронная почта
• Телефон

В настоящее время эти поля проверяемого без любые пользовательские методы или сообщения об ошибках. Поэтому, если форма отправлена ​​с пустыми полями «required *», всплывает.

Что я хотел бы сделать, так это проверить поле, не проверяя, пусто оно или нет. Так, например, с:

Имя:

1. поле не пусто/пусто
2. поле не содержит буквенно-цифровые символы

Телефон:

1. поле не пустой/пустой
2. Поле содержит только число c символы

Я очень новичок в реализации пользовательских методов проверки достоверности, я не знаю, как отображать правильные сообщения об ошибках. Поэтому, если поле телефона не пустое, но не числовые символы контейнера, я хотел бы отметить его и показать сообщение об ошибке, что это поле принимает только числовые символы.

В настоящее время у меня есть сообщение об ошибке «required *» в объекте сообщения валидатора, и я не знаю, как реализовать сообщения об ошибках на гранулированном уровне.

Приносим извинения за столь продолжительное объяснение. Я был бы очень признателен, если бы кто-то мог указать мне в правильном направлении. Спасибо

Вот ссылка на JSFIDDLE.

<div class="wrapper"> 

     <form id="contactForm" action="" method="post" enctype="multipart/form-data"> 
      <div class="fieldGroup"> 
      <!-- FIRST NAME --->  
       <lable for="firstname">First Name: </label> 
       <input type="text" id="firstname" name="firstname" size="25" maxlength="25" > 
      </div> 
      <!-- LAST NAME --> 
      <div class="fieldGroup"> 
       <lable for="lastname">Last Name: </label> 
       <input type="text" id="lastname" name="lastname" size="25" maxlength="25" > 
      </div> 
      <!-- EMAIL -->  
      <div class="fieldGroup"> 
       <lable for="email">Email: </label> 
       <input type="text" id="email" name="email" size="25" maxlength="40" >  
      </div> 
      <!-- PHONE -->  
      <div class="fieldGroup"> 
       <lable for="lastname">Phone: </label> 
       <input type="text" id="phone" name="phone" size="12" maxlength="12" > 
       xxx-xxx-xxxx 
      </div>   

      <div class="fieldGroup"> 
       <input type="submit" id="SubmitBtn" value="Submit" > 
       <input type="reset" id="ResettBtn" value="Reset" >     
      </div>    

     </form> 

    </div> 

JAVASCRIPT

(function($,W,D) 
    { 
     var JQUERY4U = {}; 

     JQUERY4U.UTIL = 
     { 
      setupFormValidation: function() 
      { 
       //form validation rules 
       $("#contactForm").validate({ 
        rules: { 
         firstname: { 
          required: true, 
          chkData: true 
         }, 
         lastname: { 
          required: true, 
          minlength: 2, 
          maxlength: 15    
         }, 
         address1:{ 
          required: true, 
          minlength: 8, 
          maxlength: 30    
         }, 
         city:{ 
          required: true, 
          minlength: 8, 
          maxlength: 25   
         },     
         state:{ 
          required: true   
         }, 
         zipcode:{ 
          required: true, 
          minlength: 5, 
          maxlength: 10 
         }, 
         phone: { 
          required: true, 
          minlength: 10, 
          maxlength: 12      
         }, 
         email: 
         { 
          required: true, 
          email: true 
         }     
        }, 
        messages: { 
         firstname: "required *", 
         lastname: "required *", 
         address1: "required *", 
         city: "required *", 
         state: "required *", 
         zipcode: "required *", 
         phone: "required *", 
         email: "required *", 
        }, 
        submitHandler: function(form) { 
         form.submit(); 
        } 
       }); 
      } 


     } 

     //when the dom has loaded setup form validation rules 
     $(D).ready(function($) { 

       $.validator.addMethod("chkData", 
       function(value, element){ 
        alert(value); 
       },"SORRY"); 
      JQUERY4U.UTIL.setupFormValidation(); 
     }); 

    })(jQuery, window, document); 

Answer 1

Ваш код был немного более сложным, чем это необходимо.

$(document).ready(function() { 

    $("#contactForm").validate({ 
     rules: { 
      firstname: { 
       required: true, 
       alphanumeric: true 
      }, 
      lastname: { 
       required: true, 
       minlength: 2, 
       maxlength: 15 
      }, 
      address1: { 
       required: true, 
       minlength: 8, 
       maxlength: 30 
      }, 
      city: { 
       required: true, 
       minlength: 8, 
       maxlength: 25 
      }, 
      state: { 
       required: true 
      }, 
      zipcode: { 
       required: true, 
       minlength: 5, 
       maxlength: 10 
      }, 
      phone: { 
       required: true, 
       phoneUS: true 
      }, 
      email: { 
       required: true, 
       email: true 
      } 
     }, 
     messages: { 
      firstname: { 
       required: "required *", 
       alphanumeric: "custom alphanumeric message" 
      }, 
      lastname: "required *", 
      address1: "required *", 
      city: "required *", 
      state: "required *", 
      zipcode: "required *", 
      phone: "required *", 
      email: "required *", 
     } 
    }); 

}); 

ДЕМО: http://jsfiddle.net/7uDXQ/

ПРИМЕЧАНИЯ:

1)alphanumeric и phoneUS правила требуют включения в additional-methods.js file.

2)

«На данный момент, у меня есть на сообщение об ошибке required * в пределах messages объекта валидатора, и я не знаю, как реализовать ошибку сообщения на детальном уровне.»

Пользовательские сообщения просто реализованы в соответствии с форматом, аналогичной вашей rules::

messages: { 
    firstname: { 
     required: "custom required *", 
     alphanumeric: "custom alphanumeric message" 
    }, 
} 

В противном случае, если вы только это сделать ...

messages: { 
    firstname: "custom required *", 
} 

Тогда все Сообщения все правила на поле firstname разделяют это же пользовательское сообщение.

3) Вы не должны указать функцию обратного вызова submitHandler, если вам нужно сделать что-то на действительной форме, как ajax. В противном случае по умолчанию форма будет просто делать нормальный submit в действительной форме. Сравните код в моем jsFiddle с кодом, который я разместил выше.

4) Нет такого правила, как chkData, поэтому я удалил его. Если это ваше настраиваемое правило, примените свое пользовательское сообщение в соответствии с моим пунктом № 2 выше.