Unable to validate form using js-CodePudding

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:

<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>
    <script> 
        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;  
            }  
        }  
</script>  
<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>

Thanks in advance.

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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>