javascript - JQuery 验证函数在页面加载时触发并抛出错误

Question

背景

我有一个带有一堆不同输入字段的表单。我正在使用一些 jquery 函数 来验证 keyup 上的输入字段。

每个函数根据 keyup 事件 触发时函数的响应返回 true 或 false。

这些函数看起来像这样，

示例 1

// First Name
var validate_first_name = function(first_name){
  var pattern =  /^[a-zA-Z'\s]{2,35}$/;
  var is_first_name_valid = false;
  if(first_name.match(pattern) != null){
    is_first_name_valid = true;
  }
  return is_first_name_valid;
}

$(document).on("keyup", "#first_name", function(){
  var input_val = $(this).val();
  var is_success = validate_first_name(input_val);
  if(!is_success){
    $('#first_name_val').addClass('fa-close').removeClass('fa-user-o').removeClass('fa-check');
  } else {
    $('#first_name_val').addClass('fa-check').removeClass('fa-user-o').removeClass('fa-close');
  }
});

问题

我有大量此类函数，并且我想禁用提交按钮，直到这些函数中的每一个返回 true。

我尝试过的

我尝试了以下解决方案的一些变体，它们要么禁用该按钮并且永远不会启用它，要么永远不会禁用该按钮。我还尝试将函数移到

之外

$(文档).ready(function() {}

我相信此解决方案会导致错误，因为它尝试检查

的值

    validate_first_name function  

在keypup事件触发之前。

错误

jquery-3.2.1.min.js:2 Uncaught TypeError: Cannot read property 'match' of undefined at validate_first_name (customer-primary.js:87) at validate (customer-primary.js:365)

示例 2

// Check Validation or Disable Submit Button
function validate(){
    if (validate_first_name()       === true &&
        validate_last_name()        === true ){
        $('#submit').prop("disabled", false);
    } else {
        $('#submit').prop("disabled", true);
    }
}

validate();
    $(
      '#first_name',
      '#last_name'
    ).change(validate);
}); // End Document Ready Function

Answer 1

var Validate = function(form, elements) {

  /* PS: checkValid -> checks all the elements are valid */
  /* check if pattern matches and call checkValid */
  var validate = function(pattern, checkValid) {
    return function() {
      if (!this.value.match(pattern)) {
        /* remove 'valid' classes and add 'invalid' classes */
        this.classList.add('invalid');
        this.classList.remove('valid');
        this.valid = false;
      } else {
        /* 'reverse' add valid classes */
        this.classList.remove('invalid');
        this.classList.add('valid');
        this.valid = true;
      }
      checkValid();
    };
  };

  /* get the form with jquery */
  var $form = $(form);

  /* get the first button in form */
  var xButton = $form[0].getElementsByTagName('button')[0];
  xButton.disabled = true;

  /* check if all elements are valid */
  var checkValid = function() {
    var xFormValid = true;
    /* if one of the xElements / inputs is not valid */
    for (var key in elements) {
      if (elements.hasOwnProperty(key)) {
        var xElement = $form[0].elements[key];
        if (xElement.valid !== true) {
          xFormValid = false;
          break;
        }
      }
    }
    if (xFormValid) {
      xButton.disabled = false;
    } else {
      xButton.disabled = true;
    }
  };
  /* each element in form */
  for (var key in elements) {
    if (elements.hasOwnProperty(key)) {
      var xElement = $form[0].elements[key];
      var pattern = elements[key];

      /* set onkey up to validate(pattern, checkValidated) */
      xElement.onkeyup = validate(pattern, checkValid);
    }
  }
};

/* <form id="form1"> */
Validate('#form1', {
  /* <input name="firstName"> */
  firstName: /^[a-zA-Z'\s]{2,35}$/,
  /* <input name="lastName"> */
  lastName: /^[a-zA-Z'\s]{2,35}$/,
  /* <input name="email"> */
  email: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
});

Validate('#form2', {
  first_name: /^[a-zA-Z'\s]{2,35}$/,
  last_name: /^[a-zA-Z'\s]{2,35}$/,
});

.valid,
.invalid:active,
.invalid:focus {
  border: 1px solid green;
  outline: 1px solid green;
}

.invalid,
.invalid:active,
.invalid:focus {
  border: 1px solid red;
  outline: 1px solid red;
}

button:disabled {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <p>
    <label>FIRST NAME</label>
    <input type="text" name="firstName">
  </p>
  <p>
    <label>LAST NAME</label>
    <input type="text" name="lastName">
  </p>
  <p>
    <label>EMAIL</label>
    <input type="text" name="email">
  </p>
  <p>
    <button type="submit">SUBMIT</button>
  </p>
</form>

<hr>

<form id="form2">
  <p>
    <label>FIRST NAME</label>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>LAST NAME</label>
    <input type="text" name="last_name">
  </p>
  <p>
    <button type="submit">SUBMIT</button>
  </p>
</form>