1//form.html
2<!DOCTYPE html>
3<html>
4<head>
5<title>Javascript Onsubmit Event Example</title>
6<link href="css/style.css" rel="stylesheet"> <!-- Include CSS File Here-->
7<script src="js/onsubmit_event.js"></script>
8</head>
9<body>
10<div class="container">
11<div class="main">
12<form action="#" method="post" onsubmit="return ValidationEvent()">
13<h2>Javascript Onsubmit Event Example</h2>
14<label>Name :</label>
15<input id="name" name="name" placeholder="Name" type="text">
16<label>Email :</label>
17<input id="email" name="email" placeholder="Valid Email" type="text">
18<label>Gender :</label>
19<input id="male" name="gender" type="radio" value="Male">
20<label>Male</label>
21<input id="female" name="gender" type="radio" value="Female">
22<label>Female</label>
23<label>Contact No. :</label>
24<input id="contact" name="contact" placeholder="Contact No." type="text">
25<input type="submit" value="Submit">
26<span>All type of validation will execute on OnSubmit Event.</span>
27</form>
28</div>
29</div>
30</body>
31</html>
32
33//js/onsubmit_event.js
34// Below Function Executes On Form Submit
35function ValidationEvent() {
36// Storing Field Values In Variables
37var name = document.getElementById("name").value;
38var email = document.getElementById("email").value;
39var contact = document.getElementById("contact").value;
40// Regular Expression For Email
41var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
42// Conditions
43if (name != '' && email != '' && contact != '') {
44if (email.match(emailReg)) {
45if (document.getElementById("male").checked || document.getElementById("female").checked) {
46if (contact.length == 10) {
47alert("All type of validation has done on OnSubmit event.");
48return true;
49} else {
50alert("The Contact No. must be at least 10 digit long!");
51return false;
52}
53} else {
54alert("You must select gender.....!");
55return false;
56}
57} else {
58alert("Invalid Email Address...!!!");
59return false;
60}
61} else {
62alert("All fields are required.....!");
63return false;
64}
65}