<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function valid() {
var flag = 0;
var name = document.udetail.uname.value;
var age = document.udetail.uage.value;
var eid = document.udetail.ueid.value;
var atrate = eid.indexOf("@");
var dot = eid.lastIndexOf(".");
var country = document.getElementById('ucountry').value;
var query = document.udetail.uquery.value;
if (name == "") {
document.getElementById('uname').innerHTML = "Name is mandatory.";
flag = 0;
} else {
document.getElementById('uname').innerHTML = "";
flag++;
}
if (age == "") {
document.getElementById('uage').innerHTML = "Age is mandatory.";
flag = 0;
} else {
document.getElementById('uage').innerHTML = "";
flag++;
}
if (eid == "") {
document.getElementById('ueid').innerHTML = "Email Id is mandatory.";
flag = 0;
} else if (atrate < 1 || dot < atrate + 2 || dot + 2 >= eid.length)
document.getElementById('ueid').innerHTML = "Invalid Email Id.";
else {
document.getElementById('ueid').innerHTML = "";
flag++;
}
if (country == '') {
document.getElementById('fucountry').innerHTML = "Country is mandatory.";
flag = 0;
} else {
document.getElementById('fucountry').innerHTML = "";
flag++;
}
if (query == '') {
document.getElementById('fquery').innerHTML = "Please enter a query."
flag = 0;
} else {
document.getElementById('fquery').innerHTML = "";
flag++;
}
if (flag == 5) {
alert("Thank You! Your query will be answered soon.")
}
}
</script>
</head>
<body>
<form name="udetail">
<table align="center">
<tr>
<td>
Name
</td>
<td>
-
<input type="text" name="uname" placeholder="Your Name">
</td>
<td>
<font color="red" id="uname"></font>
</td>
</tr>
<tr>
<td>
Age
</td>
<td>
-
<input type="text" name="uage" placeholder="Your Age">
</td>
<td>
<font color="red" id="uage"></font>
</td>
</tr>
<tr>
<td>
Email Id
</td>
<td>
-
<input type="text" name="ueid" placeholder="Your Awesome Email">
</td>
<td>
<font color="red" id="ueid"></font>
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
-
<select id="ucountry">
<option selected> </option>
<option>India</option>
<option>U.S.</option>
<option>Russia</option>
<option>China</option>
<option>Other</option>
</select>
</td>
<td>
<font color="red" id="fucountry"></font>
</td>
</tr>
<tr>
<td>
Query
</td>
<td>
-
<textarea cols="22" rows="5" name="uquery" placeholder="Enter your questions, feedback or query here."></textarea>
</td>
<td>
<font color="red" id="fquery"></font>
</td>
</tr>
</table>
<p align="center">
<input type="button" value="Submit" onclick="valid()">
</p>
</form>
</body>
</html>