最後のフィールドが入力されたときにサインアップボタンが有効になる

Question

私のウェブサイトに登録フォームがあり、ユーザーがサインアップをクリックする前にすべてのフィールドが満たされていることを確認しようとしているとき。何が起こるのは、最後の入力（性別）を入力するだけであれば、すべてのフィールドが入力されるためカウントされます。ここに私のコードは次のとおりです。

function validateForm() { 
    var x = document.forms["signUp"]["username", "firstname", "lastname", "email", "password", "passwordconfirm", "DOBMonth", "DOBDay", "DOBYear", "gender"].value; 
    if (x == "") { 
     document.getElementById("signUp").style.opacity = "0.6"; 
     document.getElementById("signUp").disabled = true; 
     return false; 
    } else { 
     document.getElementById("signUp").style.opacity = "1"; 
     document.getElementById("signUp").disabled = false; 
    } 
} 

そして、ここではHTMLです：

<form action="insert.php" method="POST" name="signUp"> 
    <h2 style="white-space: nowrap;font-size:3vmin;">SIGN UP AND MEET NEW PEOPLE!</h2> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="text" name="username" id="username" onkeydown="issetcheckusername(); validateForm();" onchange='issetcheckusername(); validateForm();' placeholder="Username" maxlength="16"> 
    <br> 
    <br> 
    <input class="inputPlaceholderName" type="text" name="firstname" id="firstname" onkeydown="issetcheckfirstname(); validateForm();" onchange='issetcheckfirstname(); validateForm();' placeholder="First name"> 
    <input class="inputPlaceholderName" type="text" name="lastname" id="lastname" onkeydown="issetchecklastname(); validateForm();" onchange='issetchecklastname(); validateForm();' placeholder="Last name"> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="email" name="email" id="email" onkeydown="issetcheckemail(); validateForm();" onchange='issetcheckemail(); validateForm();' placeholder="E-mail"> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="password" name="password" id="password" onkeyup='issetcheckpassword(); validateForm();' onchange='issetcheckpassword();' placeholder="Password" maxlength="24"> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="password" name="passwordconfirm" onkeyup='check(); validateForm();' onchange="check(); validateForm();" id="passwordconfirm" placeholder="Confirm password" maxlength="24"> 
    <br> 
    <br> 
    <div class="inputPlaceholder" id="birthday" onchange="issetcheckbirthday(); validateForm();"> 
    <p style="cursor:text;display:inline;">Birthday</p> 
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> 
    <select name="DOBMonth" id="DOBMonth" class="Dates" onchange="issetcheckbirthday(); validateForm();"> 
     <option class="inputPlaceholderBirthday">Month</option> 
     <option value="1">January</option> 
     <option value="2">February</option> 
     <option value="3">March</option> 
     <option value="4">April</option> 
     <option value="5">May</option> 
     <option value="6">June</option> 
     <option value="7">July</option> 
     <option value="8">August</option> 
     <option value="9">September</option> 
     <option value="10">October</option> 
     <option value="11">November</option> 
     <option value="12">December</option> 
    </select>&nbsp;&nbsp;&nbsp; 

    <select name="DOBDay" id="DOBDay" class="Dates" onchange="issetcheckbirthday(); validateForm();"> 
     <option>Day</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     <option value="13">13</option> 
     <option value="14">14</option> 

    </select>&nbsp;&nbsp;&nbsp; 

    <select name="DOBYear" id="DOBYear" class="Dates" onchange="issetcheckbirthday(); validateForm();"> 
     <option>Year</option> 
     <option value="2017">2017</option> 
     <option value="2016">2016</option> 
     <option value="2015">2015</option> 
     <option value="2014">2014</option> 
     <option value="2013">2013</option> 
     <option value="2012">2012</option> 
     <option value="2011">2011</option> 
     <option value="2010">2010</option> 
     <option value="2009">2009</option> 
     <option value="2008">2008</option> 
     <option value="2007">2007</option> 
     <option value="2006">2006</option> 


    </select> 
    </div> 
    <br> 
    <div class="inputPlaceholder" id="gender"> 
    <p style="display:inline;">Gender</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="radio" name="gender" value="1" id="gender" onchange="issetcheckgender(); validateForm();"> Male&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="radio" name="gender" value="0" id="gender" onchange="issetcheckgender(); validateForm();"> Female 
    </div> 
    <br> 
    <input class="inputPlaceholderFinish" id="signUp" type="submit" value="Sign Up" style="width:80%" disabled> 
</form> 

それは（この記事のために）長すぎる得ないのと同じように、私は明らかにいくつかの年と日を残してきた私は、文字がずっとずっと残念です。

Answer 1

問題は、あなたが値を取得している得る方法である：

var x = document.forms["signUp"]["username", "firstname", "lastname", "email", "password", "passwordconfirm", "DOBMonth", "DOBDay", "DOBYear", "gender"].value; 

これは、すべてのフォームフィールドの値を取得する正しい方法ではありません。

あなたがそれらを介してループする必要

し、すべてが設定されているかどうかを確認：サイドノートとして

let allFilled = true; 

for (let i = 0; i < document.forms["signUp"].length ; ++i){ 
    if (document.forms["signUp"][i].value == ""){ 
     allFilled = false; //if any is not set mark the flag as false 
     break; //and stop checking any other inputs 
    } 
} 

if (!allFilled) { 
    document.getElementById("signUp").style.opacity = "0.6"; 
    document.getElementById("signUp").disabled = true; 
    return false; 
} else { 
    document.getElementById("signUp").style.opacity = "1"; 
    document.getElementById("signUp").disabled = false; 
    return true; //was missing here 
} 

を私は強くJavaScriptの側のイベントリスナーを追加するように助言します。それはあなたがそれを整理しておくのを助け、将来的に変更するのがより簡単です。また、リスナーの設定プロセスを簡素化することもできます。