CODEWITHSUNDEEP
javascriptjqueryhtml
Islam Ismayilov
Islam Ismayilov

Reputation: 113

input text field validation check

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?

Upvotes: 0

Views: 103

Answers (2)

Gabriel West
Gabriel West

Reputation: 941

<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>

Upvotes: 0

XYZ
XYZ

Reputation: 4480

  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>

Upvotes: 1

Related Questions