Jquery textbox validation with textbox value

Question

I have a couple textbox's in a form that have values in them. I am using onfocus and onblur to clear the value when the user clicks on the textbox. I am also trying to validate the textbox's but since there is already a value in the box the validation doesn't work. Is there a way I can get the validation to ignore the value (ie. First Name)?

Thanks!

<script type="text/javascript">

 var j = jQuery.noConflict();

    j(document).ready(function() {


        j("#ContactUs_Solutions_EN2012").validate({

        rules: {
 realname: "required",
 email: {
   required: true,
   email: true
 }
 },
messages: {
 realname: "<p style='color:red; font-size:12px; margin:-10px 0 0px 0; padding:10px 0px 10px 10px ; text-align:right;'>Please specify your name</p>",
 email: {
   required: "<p style='color:red; font-size:10px; margin:-10px 0 0px 0; padding:0; text-align:right;'>We need your email address to contact you</p>",
   email: "Your email address must be in the format of name@domain.com"
  }
}
        });
    });
</script>

<input style="WIDTH: 275px" id="First_Name" name="realname" class="required" size="25" minlength="2" value="First Name" >

It doesnt validate cause it thinks there is already a value in the textbox — onei0120, Jun 22 '12 at 21:11

score 0 · Answer 1 · answered Jun 22 '12 at 21:11

You could make a global boolean variable and initialize it as false. In your "onfocus" function just change the boolean to true. Only show error messages if your boolean variable is true.

Alternatively you could use an HTML 5 attribute "placeholder"

That essentially does the on focus part for you with out actually putting a value in the text box.

See http://www.w3schools.com/html5/att_input_placeholder.asp for more details.

score 0 · Accepted Answer · answered Jun 22 '12 at 21:16

0

Since you put up a value on your textbox, your validation will not work. Change the value into placeholder. You don't need to put onfocus and onblur to clear the value because placeholder will do it for you.

<input style="WIDTH: 275px" id="First_Name" name="realname" class="required" size="25" minlength="2" placeholder="First Name" >

answered Jun 22 '12 at 21:16

Jeff Robert Dagala

613
7
19

isnt placeholde an html5 attribute, what if the users browser doesnt support html5? – onei0120 Jun 25 '12 at 22:03

Jquery textbox validation with textbox value

2 Answers2