Magento Forms: Prototype Javascript Validation

Javascript валидация не является основной проверкой введенных данных пользователями, но ее использование необходимо для повышения юзабилити сайта. Кроме того, уменьшается количество запросов на сервер и повышается его производятельность, т.к. первичная валидация происходит у пользователя в браузере. У Magento есть своя удобная валидация, о которой сегодня и пойдет речь.

Javascript валидация в Magento

Для валидации форм в Magento используется файл form.js (js/varien/form.js), в котором находятся все необходимые Javascript функции. Во время валидации используется класс Validation, который является частью Javascript библиотеки Prototype. Его работа заключается в проверке определенных html-классов. Каждое имя класса говорит валидатору какой тип проверки можно использовать.

Учимся валидировать

Добавить Javascript валидацию для вашей формы очень просто. Во-первых, необходимо создать объект Form (form.js), который будет с ней работать.

Первый параметр в это примере является ID вашей формы. Второй параметр определяет стоит ли делать фокус на первом input-элементе. Если он определен как true, то курсор будет автоматически переведен на первый input-поле. Вы можете отключить данную функциональность, устанавливая второй параметр как false.

Теперь, когда вы создали Javascript объект, который определяет форму, необходимо добавить валидационные правила в ваши input-поля.

Name *

Email Address *

Классы 'required-entry' and 'validate-email' отвечают за валидацию полей. Если любое из них ее не пройдет, то форма не будет отправлена, а пользователь увидит специальные сообщения об ошибках.

Magento Javascript Validation Classes

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

validate-select
Please select an option

required-entry
This is a required field

validate-number
Please enter a valid number in this field

validate-digits
Please use numbers only in this field. please avoid spaces or other characters such as dots or commas

validate-alpha
Please use letters only (a-z or A-Z) in this field.

validate-code
Please use only letters (a-z), numbers (0-9) or underscore(_) in this field, first character should be a letter.

validate-alphanum
Please use only letters (a-z or A-Z) or numbers (0-9) only in this field. No spaces or other characters are allowed

validate-street
Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only in this field

validate-phoneStrict
Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890

validate-phoneLax
Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890

validate-fax
Please enter a valid fax number. For example (123) 456-7890 or 123-456-7890

validate-date
Please enter a valid date

validate-email
Please enter a valid email address. For example johndoe@domain.com.

validate-emailSender
Please use only letters (a-z or A-Z), numbers (0-9) , underscore(_) or spaces in this field.

validate-password
Please enter 6 or more characters. Leading or trailing spaces will be ignored

validate-admin-password
Please enter 7 or more characters. Password should contain both numeric and alphabetic characters

validate-cpassword
Please make sure your passwords match

validate-url
Please enter a valid URL. http:// is required

validate-clean-url
Please enter a valid URL. For example http://www.example.com or www.example.com

validate-identifier
Please enter a valid Identifier. For example example-page, example-page.html or anotherlevel/example-page

validate-xml-identifier
Please enter a valid XML-identifier. For example something_1, block5, id-4

validate-ssn
Please enter a valid social security number. For example 123-45-6789

validate-zip
Please enter a valid zip code. For example 90602 or 90602-1234

validate-zip-international
Please enter a valid zip code

validate-date-au
Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006

validate-currency-dollar
Please enter a valid $ amount. For example $100.00

validate-one-required
Please select one of the above options.

validate-one-required-by-name
Please select one of the options.

validate-not-negative-number
Please enter a valid number in this field

validate-state
Please select State/Province

validate-new-password
Please enter 6 or more characters. Leading or trailing spaces will be ignored

validate-greater-than-zero
Please enter a number greater than 0 in this field

validate-zero-or-greater
Please enter a number 0 or greater in this field

validate-cc-number
Please enter a valid credit card number.

validate-cc-type
Credit card number doesn't match credit card type

validate-cc-type-select
Card type doesn't match credit card number

validate-cc-exp
Incorrect credit card expiration date

validate-cc-cvn
Please enter a valid credit card verification number.

validate-data
Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.

validate-css-length
Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%

validate-length
Maximum length exceeded