Javascript

Question

所以我有一个表单，其中包含一些输入（名字和姓氏、用户名、生日、密码和电子邮件）以及一些验证条件，例如：

function checkfnlname(field) {
curr = document.getElementById(field).value;
if ( curr.length > 0) {
    updateCSSClass(field, 1);
    return true;
}
else {
    updateCSSClass(field, 0);
    return false;
}}

这改变了它的颜色和 return true 。我使用 onKeyUp="" 调用这些函数。现在我想要做的是禁用提交按钮，直到所有字段都已完成并由那里的功能验证。我写了这个函数：

function formvalid() {
if (checkfnlname('fname') && && (all other fields)) {
    document.getElementByID("submitinput").disabled = false;
}
else {
    document.getElementByID("submitinput").disabled = true;
}
return 1;}

但我不知道 how/where 怎么称呼它。（我尝试了很多我发现的东西但没有任何效果）这是正确的方法吗？如果可以，我该如何调用此函数？

Answer 1

您需要在事件中调用验证函数。

// For example
<input type="text" onkeyup="validateForm()">
<select onchange="validateForm()"></select>

第二种方式：

不使用提交按钮，而是使用普通按钮并调用检查表单项的函数。

// Into the form or anywhere you want
<button type="button" onclick="validateForm()">Submit</button>

function validateForm() {
  // Code to validate the form items
  // if validated, send the form

  // For example submitting a form with javascript
  document.getElementById("myForm").submit();
}

Answer 2

很简单，在 type/value 检查函数中调用按钮 enable/disable 函数，就像这样-

function checkfnlname(field) {

    //here you can perform input check
    curr = document.getElementById(field).value;
    if ( curr.length > 0) {
        updateCSSClass(field, 1);
        return true;
    }
    else {
        updateCSSClass(field, 0);
        return false;
    }
    // to check button validations
    formvalid();
}

这样一来，每次您在表单中输入时，它都会检查按钮的条件是否匹配，并相应地运行。！

Answer 3

我的做法：

function updateCSSClass(a, b) {

}

function checkfnlname(field) {
  curr = document.getElementById(field).value;
  if (curr.length > 0) {
    updateCSSClass(field, 1);
    return true;
  } else {
    updateCSSClass(field, 0);
    return false;
  }
}
window.onload = function () {
  var btnSubmit = document.getElementById('submit');
  // disable submit
  btnSubmit.setAttribute('disabled', 'disabled');

  // attach the keyup event to each input
  [].slice.call(document.querySelectorAll('form input:not([type="submit"])')).forEach(function (element, index) {
    element.addEventListener('keyup', function (e) {
      // compute the number of invalid fields
      var invalidFields = [].slice.call(document.querySelectorAll('form input:not([type="submit"])')).filter(function (element, index) {
        return !checkfnlname(element.id);
      });
      if (invalidFields.length == 0) {
        // reenable the submit if n. of invalid inputs is 0
        btnSubmit.removeAttribute('disabled');
      } else {
        // disable submit because there are invalid inputs
        btnSubmit.setAttribute('disabled', 'disabled');
      }
    }, false);
  });
}

<form action="http://www.google.com">
    First name:<br>
    <input type="text" name="firstname" id="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname" id="lastname"><br>
    User name:<br>
    <input type="text" name="username" id="username"><br>
    Birthday:<br>
    <input type="date" name="birthday" id="birthday"><br>
    Password:<br>
    <input type="password" name="password" id="password"><br>
    email:<br>
    <input type="email" name="email" id="email"><br>
    <input type="submit" value="submit" id="submit">
</form>

Answer 4

最简单的方法是为每个字段调用 formvalid() onkeyup。该函数验证每个字段并在它们有效时显示按钮。

这应该可以完成工作，但效率不高。每次在任何字段上键入任何内容时都要检查每个字段是一项徒劳的工作。例如：当您从第一个输入开始时，检查最后一个是没有意义的。

相反，您可以使用一个检查函数来在字段具有有效数据时更新全局布尔变量，然后使用验证函数来检查布尔值而不是调用检查函数。然后 onkeyup 在每个字段中你应该分别调用两者（首先是检查，然后是验证）。

类似于：

validFields=[];
function checkField(field) {
    if (conditionIsMet) validFields[validFields.length]=field;
}
function validateForm() {
    if (validFields.length==numberOfFields) ...
}

和

<input type="text" name="field1" value="" onkeyup="checkfield(this.name);validateForm()" />

Answer 5

这是一个纯 ES6 和 HTML5 的方式。

您可以观察您的表格是否有变化，然后检查表格是否有效。

const form = document.getElementById('form');
form.addEventListener("change", () => {
    document.getElementById('submitBtn').disabled = !form.checkValidity()
});

我修改了 MDN to show this in action -> https://jsfiddle.net/denov/hxf3knob/2/

中的示例

Javascript - 当所有输入都有效时启用提交按钮

Javascript - Enable Submit button when all input is valid

html

forms

validation

form-submit