Как проверить форму в jQuery?

Question

Я хочу проверить свои данные с помощью jQuery или Javascript и отправить их на сервер, но почему они не проверены?

$(document).ready(function() {
  var name = $('#signup-name').val();
  var email = $('#signup-email').val();
  var password = $('#signup-password').val();
  var email_regex = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
  var pass_regex = new RegExp(/^(?=.[0-9])(?=.[!@#$%^&])[a-zA-Z0-9!@#$%^&]{7,15}$/);

  $('#signup-form').on('submit', function(e) {
    e.preventDefault();

    if (validate()) {
      $.ajax({
        type: 'post',
        url: 'signup',
        data: {
          email: email,
          password: password,
          name: name
        },
      });
    } else {
      return false;
    };
  });

  function validate() {
    // name cheak here
    if (name.length == "") {
      $('.nameerror').html("Name field required !");
      return false;
    } else if (name.length = < 3) {
      $('.nameerror').html("Name Should be greater than 3");
      return false;
    };
    // email cheak here

    if (email.length == "") {
      $('.emailerror').html("Email field required !");
      return false;
    } else if (!email_regex.test(email)) {
      $('.emailerror').html("Please enter correct email.");
      return false;
    };

    // password cheak here
    if (password.length == "") {
      $('.passerror').html("password field required !");
      return false;
    } else if (!pass_regex.test(password)) {#
      ('.passerror').html("Minimum eight characters, at least one letter and one number:");
      return false;
    };
  };
});

Answer 1

Я считаю, что проблема в том, что, хотя функция validate действительно имеет доступ к переменным name и т. Д., Они просто устанавливаются один раз, когда документ впервые готов, и никогда не обновляются.Значения переменных должны быть установлены внутри обработчика события для события submit до вызова validate.

Answer 2

Есть две основные проблемы, вы просто не передавали аргументы в функцию проверки.Я обновил ваш код с помощью аргументов, переданных функции.

Более того, вы никогда не возвращали true для любой функции, в результате ничего не будет возвращено.Также ваши операторы if разделены и будут противоречить.

Я исправил эти проблемы, надеюсь, это должно сработать!

$(document).ready(function() { 
  $('#signup-form').on('submit', function(e) {
  var name = $('#signup-name').val();
  var email = $('#signup-email').val();
  var password = $('#signup-password').val();
    e.preventDefault();
    if (validate(name, email, password)) {

      $.ajax({
        type: 'post',
        url: 'signup',
        data: {
          email: email,
          password: password,
          name: name
        },
      });

    } else {
      return false;
    };
  });
});


function validate(name, email, password) {
  var email_regex = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
  var pass_regex = new RegExp(/^(?=.[0-9])(?=.[!@#$%^&])[a-zA-Z0-9!@#$%^&]{7,15}$/);
  // name cheak here
  if (name.length == 0) {
    $('.nameerror').html("Name field required !");
    return false;
  } else if (name.length <= 3) {
    $('.nameerror').html("Name Should be greater than 3");
    return false;
  } else if (email.length == 0) { //Check Email
    $('.emailerror').html("Email field required !");
    return false;
  } else if (!email_regex.test(email)) {
    $('.emailerror').html("Please enter correct email.");
    return false;
  } else if (password.length == 0) { // password cheak here
    $('.passerror').html("password field required !");
    return false;
  } else if (!pass_regex.test(password)) {
    ('.passerror').html("Minimum eight characters, at least one letter and one number:");
    return false;
  } else {
    return true;
  }

};