Валидация полей формы заказа интернет магазина

Исходные данные

У нас имеется валидатор, который работает для формы регистрации uID-пользователей. Нам необходимо адаптировать его под нужды интернет магазина.

Посмотреть на работу валидатора можно на любом сайте с включенной uID авторизацией. Для этого перейдите на страницу /index/3. Например на регистрация на нашем сайте.

Что будем проверять?

Проверку проходят:

• Длина имени пользователя
• Длина адреса доставки
• Email пользователя. На корректность по регулярному выражению, а также на существование аккаунта с таким email
• Телефон пользователя на длину и содержание (допускаются только цифры, скобки, дефисы)

Если вы хотите добавить в скрипт свои способы проверки, то напишите об этом в комментариях.

Пишем код

Если взглянуть на исходный код страницы регистрации uID пользователей, то можно найти в ней объект uValidator:

var uValidator = {
 name: function(obj){
 return obj.value.length<2 ? 1 : 0;
 },
 captcha: function(obj,submit){
 var err = (obj.value.length < 5) ? 'Неправильный код безопасности' : 0;
 if(!err && (typeof submit == 'undefined')){
 err = -1;
 _uPostForm('',{type:'POST',url:'/index/', data:{a:48,seckey:'3380907071097286895',code:obj.value,v:2}});
 }
 return err;
 },
 email: function(obj,submit){
 obj.value = obj.value.replace(/^(\s+)|(\s+)$/,"");
 var err = obj.value.match(/^[a-zA-Z0-9_\.\-]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,8}$/) ? 0 : 'E-mail указан неправильно';
 if(!err && (typeof submit == 'undefined')){
 err = -1;
 _uPostForm('',{type:'POST',url:'/index/sub/', data:{a:50,email:obj.value,v:2}});
 }
 return err;
 },
 password: function(obj,submit){
 var pwds = ['zaqwsx','lollipop','zaq12wsx','qazwsx','q1w2e3r4','qwerty','photoshop','vfrcbv','pokemon','matrix','secret','adobeadobe','qwertyuiop[]','administrator','cjkysirj','123qweasdzxc','Test123','qweasdzxc','nikita','vkontakte','123abc','super','joshua','zzzzzz','aaaaaa','gfhjkm','natasha','yfnfif','qweasd','lovers','alexey','TempPassWord','1q2w3e4r5t6y','lol123','hello','123458b','nokia','spartak','qwe123','holysh!t','dragon','www.unet.com','star','admin','changeme','fktrcfylh','1q2w3e','qwertyuiop','zxcvbn','nastya','zxcvbnm','hallo','samsung','q1w2e3r4t5','ghbdtn','1q2w3e4r','adobe1','qazwsxedc','football','123qwe','q1w2e3','qwaszx','pass','easytocrack1','12qwaszx','qweqwe','12345qwert','macromedia','genius','qwert','abcd1234','password12345','monkey','qwerty12345','password1234567','letmein','asdfgh','nonhory45','andrea','asdfghjkl','123456a','knopka','fyfcnfcbz','test','password123456789','123456asdfghjkl','sergey','asdasd','qwertyu','dvp1dvp1dvp1dvp1','1q2w3e4r5t','iloveyou','qwer1234','vfhbyf','password123456','q1q1q1','sunshine','soccer','qwerty123','1qaz2wsx','fylhtq','marina','andrey','root','password','azerty','shadow','killer','abc123','stalker','password1','password1234','naruto','master','computer','guest','charlie','superman','fuckyou','admin123','andrew','password123','asdf','password12','demo','princess','password12345678','internet','marysia','hallo123','a369369','maximius','sexsexsex','vjqcfqn','ZXC321','1qazxsw2','1234qwer','asasas','12345qwe','ssssss','sasasa','zhurnal','1qaz2wsx3edc','qwerty123456','whatever','adobe123','daniel','summer','michael','pepper','liverpool','asdfasdf','jessica','asdfghj','726190','welcome','alexander','fdsa','chocolate','tigger','thomas','michelle','freedom','dreamweaver','maggie','purple','nicole','baseball','jennifer','jordan','trustno1','9ginger','buster','snoopy1','abcdef','647750','hannah','879957','064003','093817','787608'];
 var is=0;
 var err=0;
 for (var i=0;i15){err='Максимальная длина пароля 15 символов';}
 else if (obj.value.length<6){err='Минимальная длина пароля 6 символов';}
 else if (obj.value=='kDi3p9S7'){err='Пароль из примера недопустим';}
 else if (obj.value.match(/[^a-zA-Z0-9\-_]/)){err='В пароле присутствуют недопустимые символы';}
 else if (obj.value.match(/^[0-9]+$/)){err='Слишком простой пароль';}
 else if (is==1){err='Слишком простой пароль';}
 return err;
 }
 }

Он имеет методы name, captcha, email и password. Каждый из этих методов запускается для проверки соответствующего поля: имя, капча, email, пароль. Возможно, есть и другие методы, которые появятся, если поиграться с настройками полей регистрации, но нам достаточно и этих.

Пароль и капча на странице оформления заказа не используются, поэтому мы их убираем. Но у нас есть поле телефон и адрес доставки, поэтому мы их добавим:

var uValidator = {
 name: function(obj){
 return obj.value.length<2 ? 'Имя не может быть короче двух символов' : 0;
 },
 addres: function(obj){
 return obj.value.length<10 ? 'Адрес не может содержать менее 10 символов' : 0;
 },
 phone: function(obj){
 var err = obj.value.match(/^\d[\d\(\)\ -]{4,14}\d$/) ? 0 : 'Телефон указан неправильно. Телефон должен начинаться с цифры';
 return err;
 },
 email: function(obj,submit){
 obj.value = obj.value.replace(/^(\s+)|(\s+)$/,"");
 var err = obj.value.match(/^[a-zA-Z0-9_\.\-]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,8}$/) ? 0 : 'E-mail указан неправильно';
 if(!err && (typeof submit == 'undefined')){
 err = -1;
 _uPostForm('',{type:'POST',url:'/index/sub/', data:{a:50,email:obj.value,v:2}});
 }
 return err;
 }
 
 }

На самом деле я немного изменил сообщение об ошибке при проверке имени. В ходе тестов выяснилось, что если оставить исходный код, то сообщение не показывается. Адрес доставки имеет схожий код, разница, лишь в минимально допустимой длине.

В случае с телефоном, используется проверка по регулярному выражению /^\d[\d\(\)\ -]{4,14}\d$/. Оно допускается ввод цифр, скобок, дефисов, но требует, чтобы первый и последний символы были цифрами.

Поскольку мы не можем менять id у полей заказа, то придется ввести карту полей. Переменная fieldsMap. Слева ID поля, а справа метод валидатора, которым нужно проверить поле:

var fieldsMap = {
 1: 'phone',
 4: 'email',
 2: 'addres',
 3: 'name'
 }

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

Кстати, функция добвляет кнопке оформления заказа класс disabled при наличии непрошедших проверку полей.

Последняя строка в функции отвечает за скрытие подсказки по истечении трех секунд.

function uShowErr(name,err, fid){
 if($('#order-fld-' + fid + ' + span.uf-status-icon').length == 0){
 $('#order-fld-' + fid).after('
');
 }
 var icon = $('#uf-'+name+'-status-icon');
 var hint = $('#uf-'+name+'-status');
 if (icon.length){
 if(err == 0){
 icon.removeClass('wait').addClass('pass').removeClass('fail').children('span.uf-status').fadeOut();
 uFormStatus();
 }else if(err == -1){
 icon.addClass('wait').removeClass('pass').removeClass('fail');
 }else{
 icon.removeClass('wait').removeClass('pass').addClass('fail');
 $('#order-button').addClass('disabled'); // .attr('disabled', 'disabled');
 if(err != 1 && hint.length){
 hint.html(err);
 icon.children('span.uf-status').fadeIn(300);
 setTimeout("$('#uf-"+name+"-status-icon').children('span.uf-status').fadeOut();",3000);
 }
 }
 }
 }

Функция отображения подсказок запускает другую функцию uFormStatus, в которой собственно и выполняется проверка всех полей. Эту функцию я отредактировал так, чтобы поля из карты проверялись по указанным в карте методам.

function uFormStatus(){
 var has_err = false;
 for(fid in fieldsMap){
 var err = uValidator[fieldsMap[fid]](document.getElementById('order-fld'+fid));
 has_err = err || has_err;
 }
 if( !has_err && $('.uf-status-icon.fail').length ) {
 has_err = true;
 }
 if(has_err)
 $('#order-button').addClass('disabled'); // .attr('disabled', 'disabled');
 else
 $('#order-button').removeClass('disabled'); // .removeAttr('disabled');
 }

И последний штрих. После загрузки страницы мы должны инициализировать проверку полей. Делается это так:

$(document).ready(function(){
 $("#checkout-form input[type='text'], #checkout-form textarea").bind("blur", function(event){
 fid = this.id.split("-")[2];
 if(fieldsMap[fid]) {
 uShowErr(fieldsMap[fid],uValidator[fieldsMap[fid]](this), fid);
 }
 });
 

 $('.uf-status-icon').hover(function(){
 var el = $(this);
 if(!el.is('[showed]') && el.hasClass('fail') && el.find('span.uf-status p').html()){
 el.attr('showed',1).children('span.uf-status').fadeIn(300);
 setTimeout("$('#"+this.id+"').removeAttr('showed').children('span.uf-status').fadeOut();",3000);
 }
 });

 $('#checkout-form input[type="text"], #checkout-form textarea').each(function() {
 var inputHeight = $(this).children('input').height();
 $(this).find('.uf-status').css('margin-top', 11 + inputHeight/2 +'px');
 });
 });

Скачать js файл можно здесь:

Скачать валидатор полей заказа

Добавляем стили

Конечно, пока все выглядит не так, как на странице регистрации. Давайте добавим оформление для подсказок.

Для этого достаточно скопировать стили из шаблона форма регистрации uID-пользователей:

 #checkout-form .uf-status-icon { display:none; vertical-align:middle; width:16px; height:16px; background-repeat:no-repeat; background-size:cover; position:relative;}
 #checkout-form .uf-status-icon.text-field { margin-left:-23px }
 #uf-email-status-icon.fail, #uf-password-status-icon.fail, #uf-captcha-status-icon.fail { cursor:pointer }
 #checkout-form span.fail { display:inline-block; background-image:url(/.s/img/icon/social/fail.svg) }
 #checkout-form span.pass { display:inline-block; background-image:url(/.s/img/icon/social/pass.svg) }
 #checkout-form span.wait { display:inline-block; background-image:url(/.s/img/icon/ajsml.gif) }
 #checkout-form span.uf-status{ display:none; position:absolute; right:-15px; margin:0; z-index:5 }
 #checkout-form span.uf-status p { background-color:rgba(0,0,0,0.7); color:#fff; padding:5px 10px; white-space:nowrap; font:12px/29px 'Arial'; border-radius:3px; margin:6px 0 0 0; }
 #checkout-form span.uf-status i { float:right; margin-right:18px; display:block; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid rgba(0,0,0,0.7) }

Скачать css файл можно здесь:

Скачать CSS валидатора полей заказа

Результат

Имя:

Контактный телефон:

E-mail:

Адрес доставки:

Исходный код:

...
$ORDER_FILEDS$
...
$ORDER_BUTTON$
...
<script src="/js/ch_validator.js"></script>
...

Стили должны быть добавлены в CSS магазина или подключены отдельно.