Здравствуйте!
Пишу проверку полей на заполненность и соответствие формату. Скажите, пожалуйста, как выполнить эту же поверку на пустоту поля и при клике на submit? Сейчас у меня проверяет только при потере фокуса change и при каждом набранном символе keyup, хотелось бы и при клике на кнопку Войти. И заодно проверьте, все ли я правильно пишу, так как я только изучаю jQuery.
var pattern = /^[a-z0-9_.-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
$(".full-width").on("change keyup", function(){
if( !$.trim($(this).val()) ){
$(this).addClass('has-error').next('span').addClass('is-visible').text('Это поле обязательно для заполнения'); }else{
$(this).removeClass("has-error").next('span').removeClass('is-visible').text('');
}
if( $.trim($('#signin-password').val()) != ''){
if( $('#signin-password').val().length <= 2 ){
$('#signin-password').addClass('has-error').next('span').addClass('is-visible').text('Пожалуйста, введите 2 или более символов.');
}else{
$('#signin-password').removeClass("has-error").next('span').removeClass('is-visible').text('');
}
}
if($('#signin-email').val() != ''){
if($('#signin-email').val().search(pattern) == -1){
$('#signin-email').addClass('has-error').next('span').addClass('is-visible').text('Поле email не соответствует формату');
}else{
$('#signin-email').removeClass("has-error").next('span').removeClass('is-visible').text('');
}
}
});
input.has-error {
border: 1px solid #d76666;
}
Ответ
Напишите функции для валидации значений #signin-email и #signin-password
// Валидация почты
function validateEmail (email) {
if (email.length === 0) {
return { error: 'Это поле обязательно для заполнения' };
}
var pattern = /^[a-z0-9_.-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
if (email.search(pattern) === -1) {
return { error: 'Поле email не соответствует формату' };
}
return { valid: true };
}
// Валидация пароля
function validatePassword (password) {
if (password.length === 0) {
return { error: 'Это поле обязательно для заполнения' };
}
if (password.length < 2) {
return { error: 'Пожалуйста, введите 2 или более символов.' };
}
return { valid: true };
}
Далее функцию для работы с представлением
// $input - jQuery объект поля ввода input
// validate - функция валидации
function validateInput ($input, validate) {
var result = validate($input.val());
if (result.error) {
$input.addClass('has-error')
.next('span')
.addClass('is-visible')
.text(result.error);
} else {
$input.removeClass("has-error")
.next('span')
.removeClass('is-visible')
.text('');
}
return result.valid;
}
И наконец обработчики событий
var $signinEmail = $('#signin-email').on('change keyup', function () {
validateInput($signinEmail, validateEmail);
});
var $signinPassword = $('#signin-password').on('change keyup', function () {
validateInput($signinPassword, validatePassword);
});
$('form').on('submit', function (e) {
var valid = validateInput($signinEmail, validateEmail)
& validateInput($signinPassword, validatePassword);
if (!valid) {
e.preventDefault(); // если одно из полей не валидно, не отправляем форму
}
});
// Валидация почты
function validateEmail(email) {
if (email.length === 0) {
return {
error: 'Это поле обязательно для заполнения'
};
}
var pattern = /^[a-z0-9_.-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
if (email.search(pattern) === -1) {
return {
error: 'Поле email не соответствует формату'
};
}
return {
valid: true
};
}
// Валидация пароля
function validatePassword(password) {
if (password.length === 0) {
return {
error: 'Это поле обязательно для заполнения'
};
}
if (password.length < 2) {
return {
error: 'Пожалуйста, введите 2 или более символов.'
};
}
return {
valid: true
};
}
function validateInput($input, validate) {
var result = validate($input.val());
if (result.error) {
$input.addClass('has-error')
.next('span')
.addClass('is-visible')
.text(result.error);
} else {
$input.removeClass("has-error")
.next('span')
.removeClass('is-visible')
.text('');
}
return result.valid;
}
var $signinEmail = $('#signin-email').on('change keyup', function() {
validateInput($signinEmail, validateEmail);
});
var $signinPassword = $('#signin-password').on('change keyup', function() {
validateInput($signinPassword, validatePassword);
});
$('form').on('submit', function(e) {
var valid = validateInput($signinEmail, validateEmail) &
validateInput($signinPassword, validatePassword);
if (!valid) {
e.preventDefault(); // если одно из полей не валидно, не отправляем форму
}
});
input.has-error {
border: 1px solid #d76666;
}
Комментариев нет:
Отправить комментарий