Learn how can we do a form validation using JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false.
Validate mobile number field in JavaScript.
Validate email id field in JavaScript.
validation.js
|
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
|
<script>
function validate(){
var a = document.form.mobile.value;
var cars=document.getElementsByName("car");
if(document.getElementById('name').value==''){
alert("Please Enter your Name");
document.getElementById('name').focus();
return false;
}
if(document.getElementById('email').value==''){
alert("Please Enter your Email Address");
document.getElementById('email').focus();
return false;
}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.getElementById('email').value))
{
alert("Invalid E-mail Address! Please re-enter your address.")
document.getElementById('email').focus();
return false;
}
if(document.getElementById('mobile').value==''){
alert("Please Enter Your mobile Number");
document.getElementById('mobile').focus();
return false;
}
else if(!IsNumeric(document.getElementById('mobile').value)){
alert("Phone No. you entered is not correct");
document.getElementById('mobile').focus();
return false;
}
else if((a.length < 10) || (a.length > 10)){
alert("Please Enter 10 digit mobile Number");
document.getElementById('mobile').focus();
return false;
}
if(document.getElementById('city').value==''){
alert("Please select your city");
document.getElementById('city').focus();
return false;
}
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (cars.length === 0) {
alert('Please select atleast 1 car');
return false;
}
}
function IsNumeric(strString)
// check for valid numeric strings
{
var strValidChars = "0123456789";
var strChar;
var blnResult = true;
if (strString.length == 0) return false;
// test strString consists of valid characters listed above
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
return blnResult;
}
</script>
|
form.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script src="validation.js"></script>
<form method="post" name="form" action="" onsubmit="return validate();">
<input type="text" name="name" id="name" placeholder="Name"></br>
<input type="text" name="email" id="email" placeholder="Email"></br>
<input type="text" name="mobile" id="mobile" placeholder="Mobile"></br>
<select name="city" id="city">
<option value="">Select City</option>
<option value="1">Delhi</option>
<option value="2">Noida</option>
<option value="3">Gurgaon</option>
</select></br>
Gender : <input type="radio" name="gender" value="Male"> Male <input type="radio" name="gender" value="Female">Female</br>
Fav Car: <input type="checkbox" name="car[]" value="1">BMW <input type="checkbox" name="car[]" value="2">Honda <input type="checkbox" name="car[]" value="3">Swift</br>
<input type="submit" name="submit" value="Submit">
</form>
|