CODEWITHSUNDEEP
jqueryformsvalidationspaces
Hassan Sardar
Hassan Sardar

Reputation: 4523

Simple Form Validation - Validate Spaces

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">&nbsp;&nbsp; <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">&nbsp;</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">&nbsp;</td>
            </tr>
          </table>
        </form>

Upvotes: 0

Views: 324

Answers (3)

hima
hima

Reputation: 620

Please convert the value to ascii and comapre. You can refer this question: Convert character to ASCII code in JavaScript

ascii value for space is 32

Upvotes: 0

Amit
Amit

Reputation: 15387

Try as 

 if($.trim($("#lname").val())=="")

Full Code

if($.trim($("#fname").val())=="")
{
    $("#fname").addClass('errorClass'); 
    $("#fname").focus();
    flag = 1; 
}
else{
    $("#fname").removeClass('errorClass');
}

if($.trim($("#lname").val())=="")
{
    $("#lname").addClass('errorClass'); 
    $("#lname").focus();
    flag = 1; 
}
else{
    $("#lname").removeClass('errorClass');
}


if($.trim($("#email_address").val()) =="" || !$("#email_address").val().match(emailExp)){
    $("#email_address").addClass('errorClass'); flag = 1; 
    }
else{
    $("#email_address").removeClass('errorClass');
    }


if($.trim($("#password").val())=="")
{
    $("#password").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#password").removeClass('errorClass');
}


if($.trim($("#cpassword").val())=="" || $("#cpassword").val() != $("#password").val() )
{
    $("#cpassword").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#cpassword").removeClass('errorClass');
}



    if(flag==1){
    return false;
    }
   else
   {
    return true;   
   }

    }

Reference

Upvotes: 3

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Just trim the entered values using $.trim(). This will eliminate any whitespace within the String.

if($.trim($("#fname").val()) =="")

Upvotes: 2

Related Questions