Проверка полей на заполненность и соответствие формату на лету и при клике на submit

#javascript #jquery #инспекция_кода

Здравствуйте!

Пишу проверку полей на заполненность и соответствие формату. Скажите, пожалуйста,
как выполнить эту же поверку на пустоту поля и при клике на 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;
}


  E-mail
  
  


  Password
  
        


  




    

Ответы

Ответ 1

Напишите функции для валидации значений #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;
}


  

    E-mail
    
    
  
  

    Password
    
    
  
  

    
  



Ответ 2

Оборачиваем поля тегом 
, обрабатываем её событие сабмита (обратите внимание,
что для данного примера я добавил return false, чтобы форма в конечном счете не отправлялась)
и внутри вызываем $(".full-width").trigger('change').



var pattern = /^[a-z0-9_.-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
$(".full-width").on("change keyup", function() {
  console.log('field checked');
  
  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('');
    }
  }
});

$("#test-form").submit(function() {
  console.log('submit event triggered');
  $(".full-width").trigger('change');

  return false;
});
input.has-error {
  border: 1px solid #d76666;
}


  

    E-mail
    
    
  
  

    Password
    
    
  
  

    
  



Ответ 3

// Валидация почты
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 validateRequed(requed) {
  if (requed.length === 0) {
    return {
      error: 'Это поле обязательно для заполнения'
    };
  }
  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);
});

var $signinRequed = $('.requed').on('change keyup', function() {
  validateInput($signinRequed, validateRequed);
});

$('form').on('submit', function(e) {
  var valid = validateInput($signinEmail, validateEmail) &
    validateInput($signinPassword, validatePassword) & validateInput($signinRequed,
validateRequed);
  if (!valid) {
    e.preventDefault(); // если одно из полей не валидно, не отправляем форму
  }
});
input.has-error {
  border: 1px solid #d76666;
}


  

    E-mail
    
    
  
  

    Логин
    
    
  
  

    Имя
    
    
  
  

    Password