用JavaScript进行表单验证。 不返回期望的结果

Question

i'm making a sign up form but having some trouble checking all the required fields

HTML

<form id="form">
  <div class="form-group" id="form-group">
    <label for="exampleInputEmail1">Username</label>
    <input type="text" class="form-control" id="username" placeholder="username">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Email</label>
    <input type="email" class="form-control" id="email" placeholder="email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Confirm Password</label>
    <input type="password" class="form-control" id="confirm_password" placeholder="Confirm Password">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Message</label>
    <textarea class="form-control" rows="10" id="message"></textarea>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox1" value="option1">0
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox2" value="option1">1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox3" value="option2">2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox4" value="option3">3
    </label>
  </div>
  <br/>
  <p><span id="messagealert"></span>
  </p>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

JavaScript

function checkForm() {

   var formSubmit = document.getElementById("form");
   formSubmit.onsubmit = function() {
     var username = document.getElementById("username");
     var email = document.getElementById("email");
     var password = document.getElementById("password");
     var confirm_password = document.getElementById("confirm_password");
     var message = document.getElementById("message");
     var messageAlert = document.getElementById("messagealert");

     var checkbox1 = document.getElementById("checkbox1");

     if (username.value == "" && email.value == "" && password.value == "" && confirm_password.value == "" && message.value == "") {
       messageAlert.innerHTML = "Please fill out the fields";
       username.style.border = "1px solid red";
       email.style.border = "1px solid red";
       password.style.border = "1px solid red";
       confirm_password.style.border = "1px solid red";
       message.style.border = "1px solid red";
       return false;

     } else {
       return true;
     }

   };

 }

 window.onload = function() {
   checkForm();
 }

Now when all the fields are empty it returns false but i fill one of the fields its returning me true. i don't whats wrong with my code and also please tell me how to make check on checkboxes also

Answer 1

Yes that is because you if if (username.value == "" && email.value == "" && password.value == "" && confirm_password.value == "" && message.value == "") isn't true when one of these values are filled in therefore you will hit the else.

try something like this:

var x = 1;
if (username.value == ""){
   x = 0;
   username.style.border = "1px solid red";
}
if (email.value == ""){
   x = 0;
   email.style.border = "1px solid red";
}
if (password.value == ""){
   x = 0;
   password.style.border = "1px solid red";
}
if (confirm_password.value == ""){
   x = 0;
   confirm_password.style.border = "1px solid red";
}
if (message.value == ""){
   x = 0;
   message.style.border = "1px solid red";
}

if (x === 1){
   return true;
} else {
   messageAlert.innerHTML = "Please fill out the fields";
   return false;
}

This might be a terrible solution, you could add all those selectors into an array or similar and foreach them out and check their values to determine if they are set or not. But anyway this will make you move forward atleast.