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

Javascript - Enable Submit button when all input is valid

本文关键字：有效 启用 提交 按钮 输入 Javascript      更新时间：2023-09-26

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

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

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

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

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

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

您可以观察表单是否有更改，然后检查表单是否有效。

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

我已经修改了 MDN 中的一个示例以实际显示这一点 -> https://jsfiddle.net/denov/hxf3knob/2/

我的方法：

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>

很简单

，在您的类型/值检查函数中调用按钮启用/禁用功能，如下所示-

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();
}

这样，每次您输入表单时，它都会检查按钮的条件是否匹配，并相应地起作用。！

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

// 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();
}

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

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

相反，您可以使用一个 check 函数，该函数在

字段具有有效数据时更新全局布尔变量，然后使用 validate 函数来检查布尔值，而不是调用 check 函数。然后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()" />
相关文章：