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