1

I am unable to stop this form from being submitted (if validation fails). The form has the onSubmit="return validateThisFrom (this);" attribute.

<form action="php/create-user.php" method="POST" onSubmit="return validateThisFrom (this);">

The validate function should return false if the passwords are not matched. These are the password fields and their ids.

<input type="password" id="password">
<input type="password" id="confirm_password">

This is the function

function validateThisFrom(thisForm) {
  var pwd1 = document.getElementById('password').value;
  var pwd2 = document.getElementById('confirm_password').value;
  
  if (thisForm.password.value != thisForm.confirm_password.value) {
    document.getElementById('message').style.color = '#dc3545';
    document.getElementById('message').style.fontSize = '13px';
    document.getElementById('message').innerHTML = '<b>The passwords don\'t match!</b>.';
    document.getElementById('password').style.borderColor = '#dc3545';
    document.getElementById('confirm_password').style.borderColor = '#dc3545';
    document.getElementById('button-addon1').style.borderColor = '#dc3545';
    document.getElementById('button-addon2').style.borderColor = '#dc3545';
    
    return false;
  }
}

The message The password don't Match appears but then the form was being submitted even though the function returns false.

I've managed to take a screenshot of it by throttling the network speed(im not sure if that really works)

As you can see in the photo the message appears but then the form is being submitted.

biberman
  • 5,606
  • 4
  • 11
  • 35
Jerwin Mathew Aton
  • 47
  • 6
  • https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault – Roberto Zvjerković Jun 17 '21 at 10:29
  • 1
    I [can't reproduce the issue](https://jsfiddle.net/3srebLw1/). – Teemu Jun 17 '21 at 10:34
  • did it stopped from submitting? can i see your code about it? – Jerwin Mathew Aton Jun 17 '21 at 10:37
  • how can I see it if it is really called of not? – Jerwin Mathew Aton Jun 17 '21 at 10:38
  • 1
    Yes, it did. Just click the link in the above comment to see the code. I just looked at the image, the function is called, since the error text appears to the page. – Teemu Jun 17 '21 at 10:38
  • 1
    Does this answer your question? [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) – caramba Jun 17 '21 at 10:39
  • 1
    @Everybody Suggesting this or that or dupes won't help here, returning `false` from an inline submit handler of a form prevents the form submission. The provided code works as it is. – Teemu Jun 17 '21 at 10:41
  • 1
    @JerwinMathewAton Have you looked at the console? If you have more code than in the example, or an element is missing, and an error occurs and the function execution breaks before returning? – Teemu Jun 17 '21 at 10:43

1 Answers1

1

I checked your code in my own PC and it seems like one of your elements in your if has a problem. when I remove all those document.getElementById... and execute the program it will work just fine. check all those elements and make sure all of them are existing in your html file and you have written their id correcty. When I added them to my code problem solved.

Pulse
  • 214
  • 2
  • 9