submit button not working after validation using javascript

Question

After entering the login details that is email and password, the form gets validated but it does not submit to next page? I have used two classes with form-control to give the text box red colour when no character is entered and green colour for success.

<body>
    <div class="container">
        <div class="header">
            <h2>User Login</h2>
        </div>
        <form class="form" id="form" action="success.html" method="post">
            <div class="form-control">
                <label>Email</label>
                <input type="email" placeholder="[email protected]" id="email">
                <i class="fas fa-check-circle"></i>
                <i class="fas fa-exclamation-circle"></i>
                <small>Error message</small>
            </div>

            <div class="form-control">
                <label>Password</label>
                <input type="password" placeholder="Password" id="password">
                <i class="fas fa-check-circle"></i>
                <i class="fas fa-exclamation-circle"></i>
                <small>Error message</small>
            </div>
            <button type="Submit" id="myBtn">Submit</button>
        </form>
    </div>
    <script type="text/javascript" src="function.js"></script>
</body>

This code snippet below is javascript for my login page

var form = document.getElementById('form');
var email = document.getElementById('email');
var password = document.getElementById('password');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  checkInputs();
});

function checkInputs() {

  var emailValue = email.value.trim();
  var passwordValue = password.value.trim();

  if (emailValue === '') {
    setErrorFor(email, 'Email cannot be blank');


  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Email is not valid');
  } else {
    setSuccessFor(email);

  }

  if (passwordValue === '') {
    setErrorFor(password, 'Password cannot be blank');

  } else {
    setSuccessFor(password);

  }
  return true;
}

function setErrorFor(input, message) {
  var formControl = input.parentElement; //.form-control
  var small = formControl.querySelector('small');

  //add error message inside small
  small.innerText = message;

  //add error class
  formControl.className = 'form-control error';

}

function setSuccessFor(input) {
  var formControl = input.parentElement; //.form-control
  var small = formControl.querySelector('small');


  formControl.className = 'form-control success';
}

function isEmail(email) {
  return /^(([^<>()\[\]\\.,;:\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,
})) $ / .test(email);
}

where should I return true .can you please help with adding return true to the javascript — ara
– ara, Commented Jul 1, 2020 at 6:33

Nadeem Ahmad · Accepted Answer · 2020-07-01 06:42:47Z

1

The problem is in your submit event listener, you are preventing the default behavior of the form which stops the form from getting submitted. You can simply add another check on the checkInputs() function:

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        if (checkInputs()) {
            //If the form is valid, then submit it.
            form.submit()
        }
    });

If the form checkInputs() function returns true, then the form will be submitted. You can also write it like:

if(checkInputs() === true){
  form.submit()
}

answered Jul 1, 2020 at 6:42

Nadeem Ahmad

7453 gold badges17 silver badges45 bronze badges

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

1 Comment

Nadeem Ahmad Over a year ago

You are welcome @ara, you can do the upvote if it helped you :)

Collectives™ on Stack Overflow

submit button not working after validation using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related