Question

在登录页面中，我想创建表单验证。

我写了下面提到的代码。但它不起作用。我希望隐藏注册按钮并在所有字段都不为空时显示按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

上面提到的不行。请指出什么是问题？

Answer 1

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

这将返回具有指定class.So的所有元素。您必须遍历每个元素并检查值是否为空

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>

输入文本字段验证检查

2 个答案: