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

这改变了它的颜色并返回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

您需要在事件中调用验证功能。

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

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

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

<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()" />