input text field validation check

Question

In login page i want to create form validation.

i wrote below mentioned code. but it does not work. i want to hide sign up button and show button when all the fields is not empty.

 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> 

above mentioned dont work. please advice what is problem?

Answer 1

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

This will return all elements with the specified class.So.You have to loop through the each element and check if the value is empty

 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>