Issues with custom JavaScript form validation

Question

I'm trying to do form validation with the following code but it doesn't seem to work. What may be the problem here? How can I fix it? What am I missing?

The condition is that both the username and password must be "CS" and only then should the user be able to login. When they enter the correct username and password, they should be redirected to this page: C:\Users\Anirudha\Desktop\Latex++2\Latex+++

My code looks like this:

<!DOCTYPE html>
<html>
  <head>  
    <title> LOGIN Form</title>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/bootstrap.css">
       <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
       <style>
       body{
          margin:0;
          padding:0;
          background:url("ack.jpeg");
          background-size: cover;
          font-family: sans-serif;
           }
    
      .loginbox{  width: 320px;
          height: 450px;
          background: #000;
          color: #fff;
          top:20%;
          left:36%;
          position:absolute;
          transform: translate{-50%,-50%}
          box-sizing: border-box;
          padding: 70px 30px;
          opacity:.7;
         }
      .avatar{  width: 100px;
          height: 100px;
          border-radius:50%;
          position:absolute;
          top:-14%;
          left:calc(50% - 50px);
             }
      h1{    margin:0;
          padding: 0 0 20px;
          text-align: center;
          font-size: 30px;
          font-family:AR JULIAN;
          color:red;
        }    
      .loginbox p{  margin:0;
          padding: 0;
          font-weight:bold;
                 }
      .loginbox input{width: 100%;
          margin-bottom:20px;
                     }
      .loginbox input[type="text"], input[type="password"]{
          border: none;
          border-bottom: 1px solid #fff;
          background: transparent;
          outline:none;
          height:40px;
          color:#fff;
          font-size:16px;
              }
      .loginbox input[type="submit"]{
          border: none;
          outline:none;
          height:40px;
          background:#fb2525;
          color: #fff;
          font-size:18px;
          border-radius:20px;
              }
      .loginbox input[type="submit"]:hover
      {    cursor:pointer;
          background:#ffc107;
          color:#000;
      }
      .loginbox a{   
          text-decoration:none;
          font-size:12px;
          line-height:20px;
          color: darkgrey;
      }
      .loginbox a:hover
      {  
        color:#ffc107;
      }

      .active{
        color:#fff;
        background:#e02626;
        border-radius:4px;
      }
       </style>
  </head>
  <body>
    <img class="log">
    <div class="loginbox">
    <img src="avatar1.png" class="avatar">
    <h1>Login Here</h1>
    
    
    <script>


function validateform(){  
var name=document.myform.name.value;  
var password=document.myform.password.value;  
  
if(name!=CS){
    alert("Enter the Username as mentioned ");  
  return false;  
}
else if(password!=CS){
    alert("Enter the Password as mentioned ");
    return false;
}

} 

    </script>
    
    
    
    
    
    <form name="myform" method="POST" onsubmit="return validateForm()">
    <p> Username</p>
    <input type="text" name="name" placeholder="Enter Username: CS319">
    <p> Password</p>
    <input type="password" name="password" placeholder="Enter Password: CS319"><br>
   
    <input type="submit" name="Login" value="Login">

    <a href="file:///C:/Users/Anirudha/Desktop/Latex++2/forgotpwd.html#">Forgot password?</a><br>
    <a href="file:///C:/Users/Anirudha/Desktop/Latex++2/CreateAccount.html#">Don't have an acoount?</a>
    </form>
    
  
  </div>
    <script src="js/jquery-2.1.4.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/ajax-utils.js"></script>
      <script src="js/script.js"></script>
  </body>
</html>

score 0 · Answer 1 · answered Nov 18 '20 at 10:09

There are several small issues with your code. They are probably just typos, but still significant enough to cause problems:

In the onsubmit attribute of your form you call the validateForm() function, but the function is actually named validateform() (with a lowercase f).
When you compare the value of the username and password against the required values, you compare against an undefined variable and not against a string. To compare against strings, you need to use quotes: 'CS' instead of CS.

Replace your script with the following and the validation should work:

<script>
function validateForm() {
    var name = document.myform.name.value;
    var password = document.myform.password.value;
  
    if (name !== 'CS') {
        alert('Enter the username as mentioned');
        return false;
    } else if (password !== 'CS') {
        alert('Enter the password as mentioned');
        return false;
    }
}
</script>

With that being said, this is not the best way to do form validation in JavaScript. I would also advice you to study some basic JavaScript, to prevent issues like the ones you experienced here. I suggest you start with the MDN web docs tutorials, then continue with this article about web form validation, then this article and this answer to another question to learn more about something called event handlers.

Lastly, I would like to add that this is not a secure way of validating usernames and passwords, as the valid values will be visible in the source code for every visitor. There are many better ways to do this, but they depend on your requirements and configuration so I advice you to do some research and ask new questions if something is unclear.

Interesting in "this article" (Click vs. Submit EventListeners) they keep attaching the event handler to the `document`, which normally you'd only do if you have a need for event delegation. For `submit` in particular I can't think of a reason you would _ever_ want to do that; you ought to attach the submit event handler to the _form_ object, not the _document_. Not the greatest article. — Stephen P, Nov 18 '20 at 20:09

Issues with custom JavaScript form validation

1 Answers1