validating multiple fields in JavaScript at the same time-CodePudding

hello i wrote a code for validating name and phone number. my validation code works but im getting the validation message for the first error only even if both iputs are wrong. i want both to show if its wrong i dont know how to fix that.

this is ma javascript code

function validate(){
var name = document.getElementById("name").value;
 var phone = document.getElementById("phone").value;
 var error_message = document.getElementById("error_message");

error_message.style.padding = "10px";

var text;

if(name.length <= 0){
  text = "Please Enter valid Name";
  error_message.innerHTML = text;
  return false;
}

if(isNaN(phone) || phone.length != 10){
  text = "Please Enter valid Phone Number";
  error_message.innerHTML = text;
  return false;
}


alert("Form Submitted Successfully!");
return true;

}

this is my html code here :

<script defer src="request.js" ></script>
    <link rel="stylesheet" href="request.css">
    <body>
       
    <title>Request</title>

<div >
    <h2>Signup For a Drive Test!</h2>
    <div id="error_message">
       
    </div>
    <form action="" id="myform" onsubmit = "return validate();">
      <div >
          <input type="text" placeholder="Name" id="name ">
          

      </div>
      
      <div >
          <input type="text" placeholder="Phone" id="phone">
          

      </div>

CodePudding user response：

That's because you overwrite the text variable, you could fix it like this

var text = "";

if(name.length >= 0){
  text  = "Please Enter valid Name <br>";
}

if(isNaN(phone) || phone.length != 10){
  text  = "Please Enter valid Phone Number ";
}

error_message.innerHTML = text;

CodePudding user response：

You're returning in each if-statement, so the function returns immediately and doesn't move on to the next check. Additionally if(name.length >= 0){ will return true when there is a name, not when it's blank. Flip your greater-than to a less-than.

CodePudding user response：

A good practice would be to collect all errors in an array for example and instead of returning in each condition set a variable to see if there are errors or not like so:

<script>
  function validate() {
    var name = document.getElementById("name").value;
    var phone = document.getElementById("phone").value;
    var error_message = document.getElementById("error_message");

    error_message.style.padding = "10px";

    var text;
    var errors = [];
    var isValid = true;

    if (name.length >= 0) {
      text = "Please Enter valid Name";
      errors.push(text);
      isValid = false;
    }

    if (isNaN(phone) || phone.length != 10) {
      text = "Please Enter valid Phone Number";
      errors.push(text);
      isValid = false;
    }

    if (!isValid) {
      error_message.innerHTML = errors.join(" & ");
      return false;
    }

    alert("Form Submitted Successfully!");
    return true;
  }
</script>

CodePudding user response：

So a good idea can be to read out loud your code in just plain English. That way you will catch your logical error.

So basically, if the name.length is greater than 0 then it is an invalid name? I don't see how this is what you intended it to be.

Change it to this -

if(name.length < 1){
  text = "Please Enter valid Name";
  error_message.innerHTML = text;
  return false;
}

Also try not redesign your implementation to not return after each validation step.