Jquery Form Validation - Validate Textfield When Space are entered and No
text present in Textfield
I have a Validation which is working fine when Textfields are empty. But
when I give some spaces in a Textfield without any text entered in it, it
bypass the validation and submits Form. How can i prevent Form submitting
in this situation ?
Here is my JS Code for Validation:
<script type="text/javascript">
function valid(){
var flag = "";
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if($("#fname").val()=="")
{
$("#fname").addClass('errorClass');
$("#fname").focus();
flag = 1;
}
else{
$("#fname").removeClass('errorClass');
}
if($("#lname").val()=="")
{
$("#lname").addClass('errorClass');
$("#lname").focus();
flag = 1;
}
else{
$("#lname").removeClass('errorClass');
}
if($("#email_address").val() =="" ||
!$("#email_address").val().match(emailExp)){
$("#email_address").addClass('errorClass'); flag = 1;
}
else{
$("#email_address").removeClass('errorClass');
}
if($("#password").val()=="")
{
$("#password").addClass('errorClass');
flag = 1;
}
else{
$("#password").removeClass('errorClass');
}
if($("#cpassword").val()=="" || $("#cpassword").val() !=
$("#password").val() )
{
$("#cpassword").addClass('errorClass');
flag = 1;
}
else{
$("#cpassword").removeClass('errorClass');
}
if(flag==1){
return false;
}
else
{
return true;
}
}
</script>
Here is my CSS Code for adding Class when form Validates:
<style type="text/css">
.errorClass{
border:1px solid #F00 !important;
background-color:#F99 !important;
}
</style>
And here is my HTML Code for FORM:
<form id="form2" name="form2" method="post" action="" onSubmit="return
valid();">
<table width="80%" border="0" cellspacing="8">
<tr>
<td colspan="2" align="left" valign="middle"><span
class="Signup_Text">Sign Up here if you dont have account
yet:</span></td>
</tr>
<tr>
<td width="45%" align="left" valign="middle"><input
type="text" name="fname" id="fname" placeholder="First Name"
class="textfield" /></td>
<td width="55%" align="left" valign="middle"><input
type="text" name="lname" id="lname" placeholder="Last Name"
class="textfield" /></td>
</tr>
<tr>
<td align="left" valign="middle"><input type="text"
name="email_address" id="email_address" placeholder="Enter
Email Address" class="textfield"
onBlur="check_email(this.value);"
onKeyUp="call_loader(this.value)"/> </td>
<td align="left" valign="middle"> <span
id="authentication" class="authentication"></span></td>
</tr>
<tr>
<td align="left" valign="middle"><input type="password"
name="password" id="password" placeholder="Enter Password"
class="textfield" /></td>
<td align="left" valign="middle"><input type="password"
name="cpassword" id="cpassword" placeholder="Confirm
Password" class="textfield" /></td>
</tr>
<tr>
<td align="left" valign="middle"><input type="text"
name="dob" id="datepicker" placeholder="Date of Birth"
class="textfield" /></td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td colspan="2" align="left" valign="middle"><input
name="gender" type="radio" class="Radio_Class" id="radio"
value="Male" checked="checked" />
<label for="gender"><strong>Male</strong>
<input type="radio" name="gender" id="radio2"
value="Female" />
<strong>Female</strong></label></td>
</tr>
<tr>
<td align="left" valign="middle">
<span id="Error1">
<input type="submit" name="Register2" id="Register2"
value="Register" class="login_button1" />
</span>
</td>
<td align="left" valign="middle"> </td>
</tr>
</table>
</form>
No comments:
Post a Comment