I wish to put validation on different input fields. Here are several situations take place that does not fulfill my requirements.
1. 1st time click - all the error messages are showing (ok).
2. 2nd time click - after enter value of the first input field (name) - no error message is showing - refresh the browser Refresh button (not ok, why need to refresh the browser).
3. 3rd time click - error message for the rests of the three blank input fields are showing (not ok, this should not be needed).
What I want is - not to refresh the Refresh button of the browser, on the 2nd click of the button rests of the three error message will be shown.
Here is my code.
Please help me to resolve the situation as per my need.
1. 1st time click - all the error messages are showing (ok).
2. 2nd time click - after enter value of the first input field (name) - no error message is showing - refresh the browser Refresh button (not ok, why need to refresh the browser).
3. 3rd time click - error message for the rests of the three blank input fields are showing (not ok, this should not be needed).
What I want is - not to refresh the Refresh button of the browser, on the 2nd click of the button rests of the three error message will be shown.
Here is my code.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<title>Records</title>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
if($.trim($("#name").val()) == ""){
$("#msg_name").text("Enter Name").fadeOut(3000);
}
if($.trim($("#address").val()) == ""){
$("#msg_address").text("Enter Address").fadeOut(3000);
}
if($.trim($("#mobile").val()) == ""){
$("#msg_mobile").text("Enter Mobile").fadeOut(3000);
}
if($.trim($("#email").val()) == ""){
$("#msg_email").text("Enter Email").fadeOut(3000);
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="2" width="50%">
<tr>
<td align="left" width="20%">Name</td>
<td align="left" width="80%">
<input type="text" id="name" name="name" />
<div id="msg_name" class="msg_blank"></div>
</td>
</tr>
<tr>
<td align="left" width="20%">Address</td>
<td align="left" width="80%">
<input type="text" id="address" name="address" />
<div id="msg_address" class="msg_blank"></div>
</td>
</tr>
<tr>
<td align="left" width="20%">Mobile</td>
<td align="left" width="80%">
<input type="text" id="mobile" name="mobile" />
<div id="msg_mobile" class="msg_blank"></div>
</td>
</tr>
<tr>
<td align="left" width="20%">Email</td>
<td align="left" width="80%">
<input type="text" id="email" name="email" />
<div id="msg_email" class="msg_blank"></div>
</td>
</tr>
<tr>
<td align="left" width="20%"> </td>
<td align="left" width="80%">
<input type="button" id="button" name="button" value="Submit" />
</td>
</tr>
</table>
<div id="msg"></div>
</body>
</html>