Any difference between form inputs validation via onsubmit and onclick?

Question

I came across two types of form input validation:

1) Form validation via the onclick attribute of the Submit button:

<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script>
function validateForm() {
    var first = document.forms["myForm"]["fname"].value;
    var last = document.forms["myForm"]["lname"].value;
    if (first.trim() == "" || last.trim() == "") {
        document.getElementById("demo").innerHTML = "Name must be filled out!"; 
        return false;
    } 
}
</script>
</head>
<body>

<div id="demo" style="color:red"></div><br>
<form name="myForm" action="formHandler.jsp" method="post" target="_blank">
    First Name: <input type="text" name="fname"> <br>
    Last Name:  <input type="text" name="lname"> <br>
    <input type="submit" value="Submit" onclick="return validateForm()" > 
</form>

</body>
</html>

2) Form validation via the onsubmit attribute of the <form> element:

<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script>
function validateForm() {
    var first = document.forms["myForm"]["fname"].value;
    var last = document.forms["myForm"]["lname"].value;
    if (first.trim() == "" || last.trim() == "") {
        document.getElementById("demo").innerHTML = "Name must be filled out!"; 
        return false;
    } 
}
</script>
</head>
<body>

<div id="demo" style="color:red"></div><br>
<form name="myForm" action="formHandler.jsp" onsubmit="return validateForm()" method="post" target="_blank">
    First Name: <input type="text" name="fname"> <br>
    Last Name:  <input type="text" name="lname"> <br>
    <input type="submit" value="Submit"> 
</form>

</body>
</html>

The above two code examples achieve the same purpose of form validation. I am not asking the general difference between onclick and onsubmit addressed in this question: What's the difference between onclick and onsubmit? Instead I am asking: Which one is the preferable way to validate a form? Is there any difference between the two methods?

Check [this](https://stackoverflow.com/questions/23762474/whats-the-difference-between-onclick-and-onsubmit) out — GermanC, Jan 07 '18 at 03:06
Possible duplicate of [Whats the difference between onclick and onsubmit?](https://stackoverflow.com/questions/23762474/whats-the-difference-between-onclick-and-onsubmit) — 4castle, Jan 07 '18 at 03:07
They're different in that it's possible to submit a form without clicking a submit button. — 4castle, Jan 07 '18 at 03:08

Scott Marcus · Accepted Answer · 2018-01-07T03:33:01.087

Yes, there is a big difference and it is the event that you have a reference to when doing your validation.

During onclick, you only have a reference to the click event of the submit button. If your validation fails, and you cancel the event (via event.stopPropagation()), it may seem like you've prevented the form from submitting, but clicking the submit button is not the only way to submit a form. It can also be accomplished in some cases by pressing the ENTER key, or programmatically with form.submit(), in which case your validation code would be bypassed.

During the onsubmit, you have a reference to the submit event and if you cancel that, your form is not going to submit, regardless of what pathway led you to the submit event. For this reason, form validation should always be done via the submit event. And, it should also be done a second time on the server since all client-side validation can be easily bypassed by anyone who wants to do so.

As a side note, you should not be using inline HTML event attributes like onsubmit and onclick in the first place. That is how we did event registration 20 years ago, but because of how easy they are to implement (and a lack of understanding as to how they work and the issues that using them creates), the practice persists today. Instead, modern standards should be used via the DOM standard of .addEventListener().

document.querySelector("form").addEventListener("submit", function(evt){
  alert("Form submitted without having submit button!\nEvent was: " + evt.type);
});

<p>Click into the text box below and then press ENTER</p>
<form action="#" method="GET">
  <input id="test">
</form>

This is a great answer I like very much. Now I see the difference between the two validations. Following your answer, I was testing how I can bypass the validation via the click the event. I entered the first name and pressed the Enter key, but my form validation still works, why is that? You mentioned the 2nd validation on the server side. I am a beginner of JSP. Could you give me an example what the server side validation does with my current client side validation? Thank you so much! — Peng, Jan 07 '18 at 03:46
@Peng Your submit code still works because you still have a submit button on your form and when you pressed ENTER, it triggered that `click` event without you having to press the button yourself. If you take that button away, you'r left with nothing but the form, so your `click` code won't run. There is also the possibility of submitting the form with code, in which case, your `click` code would be bypassed. Server-side code (whatever the language/platform) should re-validate all the inbound data to ensure that it is valid according to the same rules that were applied at the client. — Scott Marcus, Jan 07 '18 at 03:50
...to ensure that no tampering was done on the client to bypass those rules. Client side code can be bypassed by anyone very easily. There is no way to prevent someone who wants to do that from doing so. — Scott Marcus, Jan 07 '18 at 04:33

score 0 · Answer 2 · 2018-01-07T03:17:46.793

0

For example onclick refers to a specific method on jquery for example or even with vanilla javascript that can be attached to a specific button through an ID

Onsubmit refers to the entire form where you can define the call to the specific function for instance:

edited Jan 07 '18 at 03:17

answered Jan 07 '18 at 03:09

1

This doesn't explain why the use of `onclick` is better/worse than `onsubmit`. It just states what the OP already knows. – Scott Marcus Jan 07 '18 at 03:30

Any difference between form inputs validation via onsubmit and onclick?

2 Answers2