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

それはボタンがthis-

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を呼び出すことであろう最も簡単な方法。この関数はすべてのフィールドを検証し、有効であればボタンを表示します。

非常に効率的ではありませんが、これは仕事をするはずです。任意のフィールドに何かを入力するたびに、すべてのフィールドをチェックすることは無駄です。例：最初の入力を開始したときに、最後の入力をチェックすることに意味がありません。

代わりに、フィールドに有効なデータがあるときにグローバルブール変数を更新するチェック関数を使用し、check関数を呼び出す代わりにブール値をチェックする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()" />