Quick Reach
JavaScript onsubmit
The HTML form’s onsubmit event occurs as an HTML form is submitted. You can attach JavaScript to onsubmit event in order to perform tasks like the form validation.
In this tutorial, we will show you how to use JavaScript onsubmit with different examples, including validation example.
JavaScript form validation example
Following is a form validation example. The demo page asks to fill three textbox fields (First name, last name, and email). The JavaScript validator will check if values in all three fields are entered or not.
If any textbox value is left blank, an alert will be shown, asking to fill the required text field. The JavaScript function is triggered as the form onsubmit event occurs.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validator(){
var err=0;
if (document.getElementById('Fname').value==0) {
if (err==0) {
document.getElementById('Fname').focus();
}
document.getElementById('Fname').style.backgroundColor='#FCC2B1';
err=1;
}
if (document.getElementById('Lname').value==0) {
if (err==0) {
document.getElementById('Lname').focus();
}
document.getElementById('Lname').style.backgroundColor='#FCC2B1';
err=1;
}
if (document.getElementById('email').value==0) {
if (err==0) {
document.getElementById('email').focus();
}
document.getElementById('email').style.backgroundColor='#FCC2B1';
err=1;
}
if (err==0) {
return true;
} else {
alert("Please enter all fields!");
return false;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return validator()">
<span>First Name: </span><input type="text" name="Fname" id="Fname" maxlength="30" value="""> <br />
<span>Last Name: </span><input type="text" name="Lname" id="Lname" maxlength="30" value="""> <br />
<span>Email: </span><input type="text" name="email" id="email" maxlength="30" value="""> <br />
<input type="submit" value="Submit">
</form>
</body>
</html>
|
As you can see, if any of the fields is left blank, the validator function will throw an alert. The form validation function is called in the form’s onsubmit event.
For that example, we simply thrown the same alert for all fields and focus is set to the first blank field found in form validation.
JavaScript submit form with email validation example
In the above example, though we used an email address for validation but we only checked if the email textbox was empty or filled.
Following is an email validation example where the format of the email will be checked as well. The JavaScript email validation function will check if ‘@’ is entered along with ‘.’ etc. See the demo by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function emailvalidator() {
var email = document.getElementById('email');
var email_filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!email_filter.test(email.value)) {
alert('Enter a valid email address');
document.getElementById('email').focus();
return false;
}
}</script>
</head>
<body>
<form action="#" onsubmit="return emailvalidator()">
<span>Name: </span><input type="text" name="Fname" id="Fname" maxlength="30" value="""> <br />
<span>Email: *</span><input type="text" name="email" id="email" maxlength="30" value="""> <br />
<input type="submit" value="Submit">
</form>
</body>
</html>
|
You can see in JavaScript form submit example, as you entered an email with the incorrect format (without @ or . or improper letters) and press the button, an alert will be shown by JS function.
Similarly, you can validate other form fields like select dropdowns, radio buttons, check boxes and any other required task by using onsubmit JavaScript event.
Further: JavaScript onclick | javaScript onchange | HTML form
Leave A Comment?