javascript - 如何修复提交按钮激活错误？

Question

现在，如果其中一个字段有效，则该按钮将被激活。

据我了解，有必要选择所有错误，如果有超过 1 个错误 - 禁用

代码验证

var forms = document.querySelectorAll('.validate');
for (var i = 0; i < forms.length; i++) {
  forms[i].setAttribute('novalidate', true);
  forms[i].lastElementChild.setAttribute('disabled', true);
}

// function has error
var hasError = function(field) {

  if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;

  var validity = field.validity;

  if (validity.valid) {
    return;
  }

  if (validity.valueMissing) {
    return 'This is a required field';
  }

  if (validity.typeMismatch) {

    // URL
    if (field.type === 'url') {
      return 'There should be a link';
    }

  }

  if (validity.tooShort) {
    return 'Must be from ' + field.getAttribute('minLength') + ' to ' + field.getAttribute('maxLength') + ' characters';
  }

  if (validity.tooLong) {
    return 'Must be from ' + field.getAttribute('minLength') + ' to ' + field.getAttribute('maxLength') + ' characters';
  }

  return 'Error';

};

// function show error
var showError = function(field, error) {

  field.classList.add('error');

  var id = field.id || field.name;
  if (!id) return;

  var message = field.form.querySelector('.error-message#error-for-' + id);
  if (!message) {
    message = document.createElement('div');
    message.className = 'error-message';
    message.id = 'error-for-' + id;

    field.parentNode.insertBefore(message, field.nextSibling);

  }

  field.setAttribute('aria-describedby', 'error-for-' + id);

  message.innerHTML = error;

  message.style.display = 'block';
  message.style.visibility = 'visible';

};

// function remove error
var removeError = function(field) {

  field.classList.remove('error');

  field.removeAttribute('aria-describedby');

  var id = field.id || field.name;
  if (!id) return;


  var message = field.form.querySelector('.error-message#error-for-' + id + '');
  if (!message) return;

  message.innerHTML = '';
  message.style.display = 'none';
  message.style.visibility = 'hidden';

};


// function check field
function checkInput(event) {

  if (!event.target.form.classList.contains('validate')) return;

  var error = hasError(event.target);

  if (error) {
    event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
    showError(event.target, error);
    return;
  }

  removeError(event.target);
  event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');

}


// function check fields
function validationForm(event) {

  if (!event.target.classList.contains('validate')) return;

  var fields = event.target.elements;

  var error, hasErrors;
  for (var i = 0; i < fields.length; i++) {
    error = hasError(fields[i]);
    if (error) {
      showError(fields[i], error);
      if (!hasErrors) {
        hasErrors = fields[i];
      }
    }
  }

  if (hasErrors) {
    event.preventDefault();
    hasErrors.focus();
  }

}

document.addEventListener('input', checkInput);
document.addEventListener('submit', validationForm);

input {
  display: inline-block;
  font-size: 1em;
  margin-bottom: 5px;
  padding: 0.25em 0.5em;
  width: 100%;
}

.button[disabled],
.button[disabled]:active,
.button[disabled]:focus,
.button[disabled]:hover {
  border-color: #ccc;
  background-color: #ccc;
}

.button {
  background-color: #0088cc;
  border: 1px solid #0088cc;
  color: #ffffff;
  display: inline-block;
  font-size: 0.9375em;
  font-weight: normal;
  line-height: 1.2;
  margin-right: 0.3125em;
  margin-bottom: 0.3125em;
  padding: 0.5em 0.6875em;
  width: auto;
}

.button:active,
.button:focus,
.button:hover {
  background-color: #005580;
  border-color: #005580;
  color: #ffffff;
  text-decoration: none;
}    


/**
* Errors
*/

.error {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 1rem;
  margin-bottom: 15px;
}

<form class="validate">
  <div>
    <input type="text" minlength="3" maxlength="40" name="name" placeholder="Enter name" required>
  </div>
  <div>
    <input type="url" name="url" pattern="^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$"
      placeholder="Enter url" required>
  </div>
  <input type="submit" class="button" value="Submit">
</form>

<br>

<form class="validate">
  <div>
    <input type="user" minlength="4" maxlength="40" id="user" placeholder="Enter user" required>
  </div>
  <div>
    <input type="position" minlength="5" maxlength="50" id="position" placeholder="Enter position" required>
  </div>
  <input type="submit" class="button" value="Submit">
</form>

我猜这是代码的问题部分

// function check field
function checkInput(event) {

  if (!event.target.form.classList.contains('validate')) return;

  var error = hasError(event.target);

  if (error) {
  event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
    showError(event.target, error);
    return;     
  }

  removeError(event.target);
  event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');

}

我希望仅当两个字段都通过验证时该按钮才会激活。但现在如果其中一个字段有效，按钮就会被激活

Answer 1

您需要更新您的检查功能。当前功能只是验证您在添加更改输入监听器时正在更改的输入。您需要添加循环来验证其他字段是否有错误。

// function check field
function checkInput(event) {

  if (!event.target.form.classList.contains('validate')) return;

  var error = hasError(event.target);

  if (error) {
    event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
    showError(event.target, error);
    return;
  }

  //To Check All fields If There is still an error
  var fields = event.target.parentElement.parentElement.elements;
  for (var i = 0; i < fields.length; i++) {
    error = hasError(fields[i]);
    if (error) {
      removeError(event.target);
      event.target.parentElement.parentElement.lastElementChild.setAttribute('disabled', true);
      return;
    }
  }

  removeError(event.target);
  event.target.parentElement.parentElement.lastElementChild.removeAttribute('disabled');

}