Question

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

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

但我不知道如何/在何处调用它。（我尝试了很多我发现但没有用的东西）这是正确的方法吗？如果是这样我怎么称呼这个功能？

Answer 1

我的方法：

＆＃13;

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 () {
  // disable submit
  document.getElementById('submit').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
        document.getElementById('submit').removeAttribute('disabled');
      } else {
        // disable submit because there are invalid inputs
        document.getElementById('submit').setAttribute('disabled', 'disabled');
      }
    }, false);
  });
}

＆＃13;

<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>

＆＃13;

Answer 2

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

// 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 3

这很简单，在你的类型/值检查功能中启用按钮启用/禁用功能，就像这样 -

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 4

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

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

相反，您可以使用检查函数在字段具有有效数据时更新全局布尔变量，然后使用validate函数检查布尔值而不是调用检查函数。然后在每个字段中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修改了一个示例，以展示其实际效果-> https://jsfiddle.net/denov/hxf3knob/2/

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

5 个答案: