Unable to validate form using js

Question

I am trying to validate a form by seeing if all the inputs are filled. So here when either email or password are empty, it should return an alert. But when I run this html file, it isn't alerting me of that.

My code:

function validateform() {
  var name = document.login.email.value;
  var password = document.login.password.value;

  if (name == null || name == "") {
    alert("Name can't be blank");
    return false;
  } else if (password.length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
  }
}

<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">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" text="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="button" value="submit">
  </form>
</body>

</html>

Thanks in advance.

Chams Agouni · Accepted Answer · 2022-07-06 04:10:36Z

1

<script type="text/javascript">
    function validateform(){  
        var name = document.getElementById("email").value;
        var password = document.getElementById("pass").value;
        
        if (name.replace(/\s/g, '') === ""){  
            alert("Name can't be blank");  
            return false:
        }

        if (password.replace(/\s/g, '').length < 6){  
            alert("Password must be at least 6 characters long.");
            return false;
        }  
    }
</script>

edited Jul 6, 2022 at 4:10

answered Jul 6, 2022 at 3:59

Chams Agouni

3742 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Extraterrestrial · Accepted Answer · 2022-07-06 04:34:44Z

You should access the value of DOM elements by DOM Methods like document.getElementById(), document.querySelector(), document.getElementsByClassName(), document.querySelectorAll() etc.

You can do the validation in two ways:

With Pure HTML
With JavaScript

1) With Pure HTML

By adding required attribute to email and password fields browser will do the validation.

<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">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" text="BCBS outlook email" required>
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" required>
    <br>
    <input type="submit" value="submit">
  </form>
</body>

</html>

2. With JavaScript

Even if browser can validate the form fields by default, using javascript is considered as best practice for validation.

In snippet below .trim() is used to remove whitespace from the strings in form fields.

Guard Clause is used in snippet

function validateform() {
  const name = document.getElementById("email").value;
  const password = document.getElementById("pass").value; 

  if (name.trim() === null || name.trim() === "") {
    alert("Name can't be blank");
  } 
  if (password.trim().length < 6) {
    alert("Password must be at least 6 characters long.");
  }
  return;
}

<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">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" text="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="submit" value="submit">
  </form>
</body>

</html>

symlink · Accepted Answer · 2022-07-06 04:00:07Z

You need to access the input elements using getElementById(), then make sure you trim your strings to get rid of any spaces:

function validateform() {  
  var name = document.getElementById("email").value;
  var password = document.getElementById("pass").value;

  if (name.trim() == null || name.trim() == "") {
    alert("Name can't be blank");
    return false;
  } else if (password.trim().length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
  }
}

<form name="login" onsubmit="return validateform()" method="post" action="/login_process">
  <label for="email">BCBS outlook email</label>
  <br>
  <input type="email" name="email" id="email" text="BCBS outlook email">
  <br>
  <label for="pass">Password</label>
  <br>
  <input type="password" name="pass" id="pass">
  <br>
  <input type="submit" value="submit">
</form>

Ananta R. Pant · Accepted Answer · 2022-07-06 04:03:38Z

<!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">
    <title>Document</title>
</head>
<body>  
    <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
        <label for="email">BCBS outlook email</label>
        <br>
        <input type="email" name="email" id="email" text="BCBS outlook email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" name="pass" id="pass">
        <br>
        <input type="submit" value="submit">
    </form>
</body>

<p id="errorTxt"></p>


<script> 
        function validateform(){  
            var name = document.getElementById("email").value;
            var password = document.getElementById("pass").value;
           if (isNaN(name) || name < 1 || (isNaN(name) || password < 6) ) {
                document.getElementById("errorTxt").innerHTML = text;
                return false;
            }  
        
        }  
</script> 
</body>
</html>

NS23 · Accepted Answer · 2022-07-06 04:11:42Z

Few mistakes in your code.

The way password is accssed in dom is incorrect.
Since you have used input type email. Broweser will by default check for empty value and valid email.

Here is a working code. as per above modifications.

 <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">
    <title>Document</title>
    <script type="text/javascript">
        function validateform() {
       
          var name = document.login.email.value;
          var password = document.login.pass.value;
        
          if (name == null || name == "") {
            alert("Name can't be blank");
            return false;
          } else if (password.length < 6) {
            alert("Password must be at least 6 characters long.");
            return false;
          }
        }
        
    </script>
</head>
<body>
    <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
        <label for="email">BCBS outlook email</label>
        <br>
        <input type="email" name="email" id="email" text="BCBS outlook email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" name="pass" id="pass">
        <br>
        <input type="submit" value="submit">
    </form>
</body>

Collectives™ on Stack Overflow

Unable to validate form using js

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related