Пользовательские правила с использованием плагина Jquery Validate - PullRequest
Новая
       11

Пользовательские правила с использованием плагина Jquery Validate

0 голосов
/ 24 августа 2011

Я прочитал всю документацию по Jquery Validate, но я до сих пор не понимаю, как использовать собственные правила проверки входных данных.

HTML 

<form id="myForm">
   <input type="text" name="firstName" class="required" />
   <input type="text" name="lastName" class="required" />
   <input type="text" name="phone" class="phone" />
</form>

JQuery / Javascript 

$("#myForm").validate({
   rules: {
      // what do I put here so that an input with class phone is validated?
   },
   messages: {
      // what do I put here so that this message is displayed if .phone is invalid?
   }
});

Из того, что я прочитал, можно построить свое собственное правило, чтобы номер телефона не только требовался, но и имел ровно 10 цифр иесли это не так, я могу указать сообщение для показа.

JS выше - это то, что я пробовал по существу прямо из документации, но оно не работает.Поле никогда не проверяется и сообщение никогда не отображается.

Любая помощь приветствуется

Ответы [ 2 ]

2 голосов
/ 24 августа 2011

вы можете сделать что-то вроде этого: 

rules: {
    name1: {
        required: true,
        ValidCharsGeneral: true,
        minlength: 2,
        maxlength: 50
    },
    name2: {
        required: true,
        ValidCharsGeneral: true,
        minlength: 2,
        maxlength: 50
    }
},
messages: {
    name1: {
        required: "This information is required",
        minlength: "Username must be at least 6 characters long",
        maxlength: "Username must be at most 50 characters long",
        remote: "Username is already in use"
    },
    name2:{
        required: "This information is required",
        email: "Email address is not valid",
        remote: "Email address is already in use"
    }
}
1 голос
/ 24 августа 2011

По умолчанию не существует валидатора «phone», однако в файле Additional-method.js содержатся валидаторы для шаблонов телефонных номеров в США и Великобритании.Вы можете найти ссылки на этот файл здесь .

Вы можете запустить этот код здесь: http://jsfiddle.net/iknowkungfoo/XCuPj/

HTML 

<form id="myForm">
   <input type="text" name="firstName" class="required" /><br />
   <input type="text" name="lastName" class="required" /><br />
   <input type="text" name="phone" class="phoneUS digits" maxlength="10" /><br />
   <input type="submit" />
</form>

JavaScript 

$('#myForm').validate({
    messages: {
        phone: "Invalid phone number, please correct this."
    }
});

С помощью атрибутов класса я указал, что поле phone должно соответствовать проверке phoneUS и цифр.Я также указал, что «maxlength» для поля равно 10. Затем в коде JavaScript я указал сообщение, которое будет отображаться, когда имена полей phone не пройдут проверку.

Альтернативно, я могу указать сообщение для каждого валидатора, связанного с полем phone .

Альтернативный JavaScript http://jsfiddle.net/iknowkungfoo/dvfJu/2/

$('#myForm').validate({
    messages: {
        phone: {
            phoneUS: "phoneUS failed",
            digits: "digits failed"
        }
    }
});

FWIW, если вы используете валидатор phoneUS и задаете maxlength до 10, то между разделами телефонного номера не будет места для тире.Учитывая, что валидатор phoneUS не допускает буквенно-цифровые символы (кроме тире), валидатор цифр не требуется.

...