Search code examples
javascripthtmlformsvalidation

Form not validating js

I want to validate the form but it is returning true value even it is false

I want return false if name.length > 10 and show error text but it is directing to the action page how?. Can anybody help me with this Code:

function ShowError(id, error) {
  element = document.getElementById(id);
  element.getElementsByClassName('return-error')[0].innerHTML = error;
}

function ValidateForm() {
  var return_value = true;

  var name = document.forms['MyForm']["name"].value;
  var phonenumber = document.forms['MyForm']["number"].value;
  var email = document.forms['MyForm']["email"].value;
  var password = document.forms['MyForm']["pass"].value;
  var cpassword = document.forms['MyForm']["cpass"].value;
  if (name.length > 10) {
    ShowError("name", "*Username is too long");
    return_value = false;
  }
  return return_value;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>login & Continue</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
  <link href="context.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg">
    <div class="container-fluid d-flex justify-content-center">
      <a class="navbar-brand text-white fs-1" href="index.html">
        <img src="assets\logo.png" alt="Bootstrap" width="60" height="54" class="d-inline-block align-text-top" /> The IN-Planet
      </a>
    </div>
  </nav>

  <div class="login d-flex justify-content-center align-content-center m-5">
    <div class="card bg-dark flex-wrap" style="width: 30rem">
      <img src="assets\Travelling-to-India1.jpg" alt="" class="card-img-top img-fillter" />

      <form name="MyForm" action="home.html" onsubmit="return ValidateForm()" method="get">
        <div class="m-5">
          <input type="text" class="form-control m-3" placeholder="Username" name="name" id="name" />
          <div class="return-error m-3"></div>
          <input type="number" class="form-control m-3" placeholder="Phone Number" name="number" id="number" />
          <div class="return-error m-3"></div>
          <input type="email" class="form-control m-3" placeholder="Email" name="email" id="email" />
          <div class="return-error m-3"></div>
          <input type="password" class="form-control m-3" placeholder="Password" name="pass" id="pass" />
          <div class="return-error m-3"></div>
          <input type="password" class="form-control m-3" placeholder="Confirm Password" name="cpass" id="cpass" />
          <div class="return-error m-3"></div>
          <input type="submit" class="btn btn-info btn-lg ms-3" value="SignUp" />
        </div>
      </form>
    </div>
  </div>

  <footer class="bg-dark text-light text-center p-5">
    <div class="container">
      <p>© 2023 THE IN-PLANET. All rights reserved.</p>
      <div class="btn-group" role="group" aria-label="Basic outlined example">
        <button type="button" class="btn">
            <a href="www.facebook.com"
              ><img src="assets\socialmedia\fb.png" alt=""
            /></a>
          </button>
        <button type="button" class="btn">
            <a href="www.instagram.com"
              ><img src="assets\socialmedia\insta.png" alt=""
            /></a>
          </button>
        <button type="button" class="btn">
            <a href="www.whatsapp.com"
              ><img src="assets\socialmedia\whae.png" alt=""
            /></a>
          </button>
      </div>
      <div class="row">
        <div class="footer-content col-md-4">
          <a href="index.html">Home</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="feedback.html">Feedback</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="about.html">About Us</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="contact.html">Contact Us</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="privacy.html">Privacy Policy</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="service.html">Our Services</a>
        </div>
      </div>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>

</html>

Can anyone help me with this.It is returning true value even it is false. Help me with this!!!!!!!!

Solution

  • There are some mistakes in your code, which I am highlighting here.

    1. No PreventDefault() function to see the validation if you don't add prevent default, your browser will reload the page when you submit the form.

    2. Wrong calling to DOM element

      element = document.getElementById(id);
  document.getElementsByClassName("return-error")[0].innerHTML = error;

    This code is not making sense, because you're assigning an ID to an element and reusing it to call classes. You can achieve it by this code

      document.getElementsByClassName("return-error")[0].innerHTML = error;

    It will call all the elements with the return-error class and will use the specific index you assigned.

    Correct Version of Code

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>login & Continue</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <link href="context.css" rel="stylesheet" />
    <script src="./app.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid d-flex justify-content-center">
        <a class="navbar-brand text-white fs-1" href="index.html">
          <img
            src="assets\logo.png"
            alt="Bootstrap"
            width="60"
            height="54"
            class="d-inline-block align-text-top"
          />
          The IN-Planet
        </a>
      </div>
    </nav>

    <div class="login d-flex justify-content-center align-content-center m-5">
      <div class="card bg-dark flex-wrap" style="width: 30rem">
        <img
          src="assets\Travelling-to-India1.jpg"
          alt=""
          class="card-img-top img-fillter"
        />

        <form
          name="MyForm"
          action="home.html"
          onsubmit="event.preventDefault(); ValidateForm()"
          method="get"
        >
          <div class="m-5">
            <input
              type="text"
              class="form-control m-3"
              placeholder="Username"
              name="name"
              id="name"
            />
            <div class="return-error m-3"></div>
            <input
              type="number"
              class="form-control m-3"
              placeholder="Phone Number"
              name="number"
              id="number"
            />
            <div class="return-error m-3"></div>
            <input
              type="email"
              class="form-control m-3"
              placeholder="Email"
              name="email"
              id="email"
            />
            <div class="return-error m-3"></div>
            <input
              type="password"
              class="form-control m-3"
              placeholder="Password"
              name="pass"
              id="pass"
            />
            <div class="return-error m-3"></div>
            <input
              type="password"
              class="form-control m-3"
              placeholder="Confirm Password"
              name="cpass"
              id="cpass"
            />
            <div class="return-error m-3"></div>
            <input
              type="submit"
              class="btn btn-info btn-lg ms-3"
              value="SignUp"
            />
          </div>
        </form>
      </div>
    </div>

    <footer class="bg-dark text-light text-center p-5">
      <div class="container">
        <p>© 2023 THE IN-PLANET. All rights reserved.</p>
        <div class="btn-group" role="group" aria-label="Basic outlined example">
          <button type="button" class="btn">
            <a href="www.facebook.com"
              ><img src="assets\socialmedia\fb.png" alt=""
            /></a>
          </button>
          <button type="button" class="btn">
            <a href="www.instagram.com"
              ><img src="assets\socialmedia\insta.png" alt=""
            /></a>
          </button>
          <button type="button" class="btn">
            <a href="www.whatsapp.com"
              ><img src="assets\socialmedia\whae.png" alt=""
            /></a>
          </button>
        </div>
        <div class="row">
          <div class="footer-content col-md-4">
            <a href="index.html">Home</a>
          </div>
          <div class="footer-content col-md-4">
            <a href="feedback.html">Feedback</a>
          </div>
          <div class="footer-content col-md-4">
            <a href="about.html">About Us</a>
          </div>
          <div class="footer-content col-md-4">
            <a href="contact.html">Contact Us</a>
          </div>
          <div class="footer-content col-md-4">
            <a href="privacy.html">Privacy Policy</a>
          </div>
          <div class="footer-content col-md-4">
            <a href="service.html">Our Services</a>
          </div>
        </div>
      </div>
    </footer>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

    JS Code

    

    

    

    function ShowError(id, error) {
  document.getElementsByClassName("return-error")[0].innerHTML = error;
}

function ValidateForm() {
  var return_value = true;

  var name = document.forms["MyForm"]["name"].value;
  var phonenumber = document.forms["MyForm"]["number"].value;
  var email = document.forms["MyForm"]["email"].value;
  var password = document.forms["MyForm"]["pass"].value;
  var cpassword = document.forms["MyForm"]["cpass"].value;
  if (name.length > 10) {
    ShowError("name", "*Username is too long");
    return_value = false;
  }
  return return_value;
}
    

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>login & Continue</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
  <link href="context.css" rel="stylesheet" />
  <script src="./app.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg">
    <div class="container-fluid d-flex justify-content-center">
      <a class="navbar-brand text-white fs-1" href="index.html">
        <img src="assets\logo.png" alt="Bootstrap" width="60" height="54" class="d-inline-block align-text-top" /> The IN-Planet
      </a>
    </div>
  </nav>

  <div class="login d-flex justify-content-center align-content-center m-5">
    <div class="card bg-dark flex-wrap" style="width: 30rem">
      <img src="assets\Travelling-to-India1.jpg" alt="" class="card-img-top img-fillter" />

      <form name="MyForm" action="home.html" onsubmit="event.preventDefault(); ValidateForm()" method="get">
        <div class="m-5">
          <input type="text" class="form-control m-3" placeholder="Username" name="name" id="name" />
          <div style="color:red" class="return-error m-3"></div>
          <input type="number" class="form-control m-3" placeholder="Phone Number" name="number" id="number" />
          <div class="return-error m-3"></div>
          <input type="email" class="form-control m-3" placeholder="Email" name="email" id="email" />
          <div class="return-error m-3"></div>
          <input type="password" class="form-control m-3" placeholder="Password" name="pass" id="pass" />
          <div class="return-error m-3"></div>
          <input type="password" class="form-control m-3" placeholder="Confirm Password" name="cpass" id="cpass" />
          <div class="return-error m-3"></div>
          <input type="submit" class="btn btn-info btn-lg ms-3" value="SignUp" />
        </div>
      </form>
    </div>
  </div>

  <footer class="bg-dark text-light text-center p-5">
    <div class="container">
      <p>© 2023 THE IN-PLANET. All rights reserved.</p>
      <div class="btn-group" role="group" aria-label="Basic outlined example">
        <button type="button" class="btn">
            <a href="www.facebook.com"
              ><img src="assets\socialmedia\fb.png" alt=""
            /></a>
          </button>
        <button type="button" class="btn">
            <a href="www.instagram.com"
              ><img src="assets\socialmedia\insta.png" alt=""
            /></a>
          </button>
        <button type="button" class="btn">
            <a href="www.whatsapp.com"
              ><img src="assets\socialmedia\whae.png" alt=""
            /></a>
          </button>
      </div>
      <div class="row">
        <div class="footer-content col-md-4">
          <a href="index.html">Home</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="feedback.html">Feedback</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="about.html">About Us</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="contact.html">Contact Us</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="privacy.html">Privacy Policy</a>
        </div>
        <div class="footer-content col-md-4">
          <a href="service.html">Our Services</a>
        </div>
      </div>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>