Skip to content

Instantly share code, notes, and snippets.

@yaroslavKas
Created May 18, 2016 13:59
Show Gist options
  • Save yaroslavKas/14ca3a5741f36ee665506c676d2291ce to your computer and use it in GitHub Desktop.
Save yaroslavKas/14ca3a5741f36ee665506c676d2291ce to your computer and use it in GitHub Desktop.
Валидация формы
.error-phone.error p{
font-size: 11px;
color: #C32929;
line-height: 11px;
margin-bottom: 5px;
margin-top: 5px;
}
.error-box.error p{
font-size: 11px;
color: #C32929;
line-height: 11px;
margin-bottom: 5px;
margin-top: 5px;
}
.error-phone.not_error p{
font-size: 11px;
color: green;
line-height: 11px;
margin-bottom: 5px;
margin-top: 5px;
}
.error-box.not_error p{
font-size: 11px;
color: green;
line-height: 11px;
margin-bottom: 5px;
margin-top: 5px;
}
var rv_name = /^[а-яА-Я]+$/;
var rv_number =/[+]\d[ ][(]\d{3}[)][ ]\d{3}[-]\d{2}[-]\d{2}/; /*Работает только с маской*/
jQuery('.name').after('<div class="error-box"></div>');
jQuery('.phone').after('<div class="error-phone"></div>');
jQuery('.name').keyup( function(){
var box = jQuery(this).parent().find('.error-box');
var name = jQuery(this).val();
jQuery(box).css('display', 'block');
if(name != '' && rv_name.test(name) && name.length >= 3){
jQuery(this).next('.error-box').removeClass('error').addClass('not_error').html('<p>принято</p>');
jQuery(name).next('.error-box').fadeIn('slow');
jQuery(".submit").attr('disabled', false);
jQuery(this).parents('form').find('.submit').attr('disabled', false);
}else{
jQuery(this).parents('form').find('.submit').attr('disabled', true);
jQuery(this).next('.error-box').removeClass('not_error').addClass('error').html('<p> - не менее 3 символов (RU)</p>');
}
});
jQuery('.phone').keyup( function(){
var phone = jQuery(this).val();
var box = jQuery(this).parent().find('.error-phone');
jQuery(box).css('display', 'block');
if(rv_number.test(phone)){
jQuery(this).next('.error-phone').removeClass('error').addClass('not_error').html('<p>принято</p>');
jQuery(this).parents('form').find('.submit').attr('disabled', false);
}
else{
jQuery(this).parents('form').find('.submit').attr('disabled', true);
jQuery(this).next('.error-phone').removeClass('not_error').addClass('error').html('<p> - номер не менее 10 символов</p>');
}
});
function get_name_browser(){
// получаем данные userAgent
var ua = navigator.userAgent;
// с помощью регулярок проверяем наличие текста,
// соответствующие тому или иному браузеру
if (ua.search(/Chrome/) > 0) return 'Google Chrome';
if (ua.search(/Firefox/) > 0) return 'Firefox';
if (ua.search(/Opera/) > 0) return 'Opera';
if (ua.search(/Safari/) > 0) return 'Safari';
if (ua.search(/MSIE/) > 0) return 'Internet Explorer';
// условий может быть и больше.
// сейчас сделаны проверки только
// для популярных браузеров
return 'Не определен';
}
var browser = get_name_browser();
if(browser == 'Firefox'){
jQuery('.submit').attr('disabled', true);
}
jQuery(".submit").click(function(){
var name = jQuery(this).parent().find('.name');
var phone = jQuery(this).parent().find('.phone');
nameValid(name);
phoneValid(phone);
if(nameValid(name) == true){
if(phoneValid(phone) == true){
jQuery(this).attr('disabled', false);
jQuery(phone).next('.error-phone').fadeOut(2000);
jQuery(name).next('.error-box').fadeOut(2000);
}
else{
jQuery(this).attr('disabled', true);
alertify.error('Заполните поле телефон', 4);
}
}
else{
jQuery(this).attr('disabled', true);
alertify.error('Заполните поле имя', 4);
}
});
function nameValid(argum){
jQuery(argum).next('.error-box').fadeIn('slow');
if(jQuery(argum).val() != '' && rv_name.test(jQuery(argum).val()) && jQuery(argum).val().length >= 3){
jQuery(name).next('.error-box').removeClass('error').addClass('not_error').html('<p>принято</p>');
return true;
}
else{
jQuery(argum).next('.error-box').removeClass('not_error').addClass('error').html('<p> - не менее 3 символов (RU)</p>');
return false;
}
}
function phoneValid(argum){
jQuery(argum).next('.error-phone').fadeIn('slow');
if(rv_number.test(jQuery(argum).val())){
jQuery(argum).next('.error-phone').removeClass('error').addClass('not_error').html('<p>принято</p>');
return true;
}
else{
jQuery(argum).next('.error-phone').removeClass('not_error').addClass('error').html('<p> - номер не менее 10 символов</p>');
return false;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment