CODEWITHSUNDEEP
javascripthtml
Peng
Peng

Reputation: 1491

Any difference between form inputs validation via onsubmit and onclick?

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?

Upvotes: 2

Views: 1209

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

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>

Upvotes: 3

user4727469
user4727469

Reputation:

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:

Upvotes: 0

Related Questions