輸入文本字段驗證檢查

Question

在登錄頁面中，我想創建表單驗證。

我寫了下面提到的代碼。 但它不起作用。 當所有字段都不為空時，我想隱藏注冊按鈕並顯示按鈕。

 function signupbtnactive (){ var inputsignup = document.getElementsByClassName('input').val(); while(inputsignup != null && !inputsignup.isEmpty()) { $('#signupbtn').show(); }; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sign-up-htm"> <div class="group"> <label for="newloginusername" class="label">Username</label> <input id="newloginusername" type="text" class="input"> </div> <div class="group"> <label for="newloginusersname" class="label">Surname</label> <input id="newloginusersname" type="text" class="input"> </div> <div class="group"> <label for="newloginuser" class="label">Loginname</label> <input id="newloginuser" type="text" class="input"> </div> <div class="group"> <label for="newloginpwd" class="label">Password</label> <input id="newloginpwd" type="password" class="input" data-type="password"> </div> <div class="group"> <label for="newloginpwdconfirm" class="label">Repeat Password</label> <input id="newloginpwdconfirm" type="password" class="input" data-type="password"> </div> <div class="group"> <label for="loginemail" class="label">Email Address</label> <input id="loginemail" type="text" class="input"> </div> <div class="group"> <label for="loginemailcopy" class="label">Repeat Email Address</label> <input id="loginemailcopy" type="text" class="input"> </div> <div class="group"> <label for="dobsignup" class="label">Date of birth</label> <input id="dobsignup" type="text" class="input" onblur="Checkemailsignup()"> </div> <div class="group" id="signupdivbtn"> <input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;"> </div> </div> 

上述不工作。 請指教是什么問題？

Answer 1

  var inputsignup = document.getElementsByClassName('inputField') ;

這將返回具有指定類的所有元素。因此，您必須遍歷每個元素並檢查值是否為空

 function signupbtnactive (){ var inputsignup = document.getElementsByClassName('inputField') ; var flag = false; for(var i in inputsignup){ if(inputsignup[i].value== '' ){ flag = true; }else{ //console.log(inputsignup[i].value); } } if(!flag) { $('#signupbtn').show(); }; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sign-up-htm"> <div class="group"> <label for="newloginusername" class="label">Username</label> <input id="newloginusername" type="text" class="inputField"> </div> <div class="group"> <label for="newloginusersname" class="label">Surname</label> <input id="newloginusersname" type="text" class="inputField"> </div> <div class="group"> <label for="newloginuser" class="label">Loginname</label> <input id="newloginuser" type="text" class="inputField"> </div> <div class="group"> <label for="newloginpwd" class="label">Password</label> <input id="newloginpwd" type="password" class="inputField" data-type="password"> </div> <div class="group"> <label for="newloginpwdconfirm" class="label">Repeat Password</label> <input id="newloginpwdconfirm" type="password" class="inputField" data-type="password"> </div> <div class="group"> <label for="loginemail" class="label">Email Address</label> <input id="loginemail" type="text" class="inputField"> </div> <div class="group"> <label for="loginemailcopy" class="label">Repeat Email Address</label> <input id="loginemailcopy" type="text" class="inputField"> </div> <div class="group"> <label for="dobsignup" class="label">Date of birth</label> <input id="dobsignup" type="text" class="inputField" onblur="signupbtnactive()"> </div> <div class="group" id="signupdivbtn"> <input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;"> </div> </div> 

Answer 2

<script>
    //Set up the event listener to check every input when one changes
    $(".group input").change(checkInputs) 

    //function that checks all the inputs for values
    function checkInputs() {
        let $signUpButton = $("#signupbtn") 
        let $inputs = $(".group input") 
        let numOfEmptyInputs = $inputs.filter((i, input) => !input.value).length 

        if(numOfEmptyInputs  === 0) { 
            $signUpButton.show()
        } else {                        
            $signUpButton.hide()
        }
    }
</script>