Javascript form validation

Question

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

This code validates an HTML form. I can't understand what onsubmit="return validateForm()" means. How does it prevent the page from completing the form submission? I understand the logic behind the validation,but I do not understand the procedure by which it stops the submission.

TestCandidate · Accepted Answer · 2016-08-06 18:41:40Z

1

This is similar to calling a function in any programming language.

When you are calling the validateForm() function, if the return value is true, the submission will continue normally (or any value that is not false).

However, if you return false as in your case of error, the dom will understand not to submit your form as an error has occurred. returning false is a flag to stop the form from submitting.

answered Aug 6, 2016 at 18:41

TestCandidate

1667 bronze badges

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

1 Comment

TestCandidate Over a year ago

Can you please elaborate on what do you need ?

MartinMouritzen · Accepted Answer · 2016-08-06 18:41:33Z

1

The form only submits if the code inside onsubmit="" doesn't return false. if x is null or an empty string then validateForm returns false, which stops the submit from happening.

answered Aug 6, 2016 at 18:41

MartinMouritzen

2511 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript form validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related