Problem with form validation using pure javascript :(

user_18416765 0
Viewed 38

currently, im working on a form validation project with with four fields. Im using regular expressions in order to validate the input but looks like something is wrong because every time that I hit the submit button the form dosent validate the data that is just entered. Can anyone Help me out? Heres my html & javascript code.

function validate () {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const phone = document.getElementById('phone').value;
    const regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const regpass = /^(?=.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{10,16}$/;
   const regphone =/^ (0|\+98)?([ ]|-|[()]){0,2}9[1|2|3|4]([ ]|-|[()]){0,2}(?:[0-9]([ ]|-|[()]){0,2}){8}/;
   const resultemail = regEmail.test('email');
   const resultpass = regpass.test('password');
   const resultphone = regphone.test('phone');
    //conditions
      if(resultemail == false || resultemail == "") {
          document.getElementsByClassName('erroremail').innerHtml = "لطفا ایمیل را با فرمت صحیح وارد کنید";
          return false;
      } else {
        document.getElementsByClassName('validemail').innerHtml= "ایمیل صحیح است";
        
      }
      if(resultpass == false || resultpass == "") {
        document.getElementsByClassName('errorpass').innerHtml = "لطفا پسورد را با فرمت صحیح وارد کنید";
        return false;
      } else {
        document.getElementsByClassName('erroremail').innerHtml = "پسورد صحیح است";
        
      }
      if(resultphone == false || resultphone == "") {
        document.getElementsByClassName('errorphone').innerHtml = "شماره تلفن اجباری است";
        return false;
      } else {
        document.getElementsByClassName('validphone').innerHtml = "شماره تلفن صحیح است";
      }
      return true;

   
    
    

      
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
  <form action="submit" method="get" onclick="validate()">
    <div>
      <div><label for="name">Name:</label></div>
      <input type="text" id="name" placeholder="Enter your name here...">
      <small class="errorname"  style="color:red;"></small>
      <small class="validname" style="color: green;" ></small>
    </div>
    <div>
      <div><label for="email">email:</label></div>
      <input type="text" id="email" placeholder="Enter your email here..." >
      <small class="erroremail"  style="color:red;"></small>
      <small class="validemail" style="color: green;" ></small>
    </div>
    <div>
      <div><label for="password">password:</label></div>
      <input type="text" id="password" placeholder="Enter your password here..." >
      <small class="errorpass" style="color:red;" ></small>
      <small class="validpass" style="color: green;" ></small>
    </div>
    <div>
      <div><label for="phone">Phone number:</label></div>
      <input type="text" id="phone" placeholder="Enter your phone number here..." >
      <small class="errorphone" style="color:red;" ></small>
      <small class="validphone" style="color: green;"></small>
    </div>
    <div>
      <input type="submit" value="submit" >
    </div>
  </form>



  <script src="./main.js" ></script>
</body>
</html>

validation forms javascript
1 Answers

getElementsByClassName has no definition for innerHTML because getElementsByClassName returns a NodeList object not an element. A NodeList is essentially a collection of elements.

Try it with getElementById as it works perfectly with your code. Also don't forget to set id for small tags. Example would be :

if (resultemail == false || resultemail == "") {
  document.getElementById("erroremail").innerHTML = "test email";
  return false;
}

Or if you need to set it under class , You can set it by using the following code.

if (resultemail == false || resultemail == "") {
  document.getElementsByClassName("erroremail")[0].innerHTML =
    "لطفا ایمیل را با فرمت صحیح وارد کنید";
  return false;
}
user_82401200
Related