jQuery validation ignores placeholder!

I am using jQuery validation plugin to validate my form, but it is seems to ignore required fields witch have placeholder text.

How to solve it?

To dis开发者_运维百科play placeholders in all browsers I am using this jQuery plugin - http://formalize.me/

And to validate my form, I am using this code :

$("#userRegistration").validate({
errorLabelContainer: "#messageBox",
wrapper: "li",
rules: {
    password: "required",
    password_again: {
    equalTo: "#password"
    }
  }
});

You can bind this statement to your submit event. Either through jQuery validate, or manually. (pseudocode, you need to add your values).

if(element.val() == placeholderText){
              element.val('');
 } 

This is untested, but you could try changing your required validator to something like this:

password:  {
  required: function(element) {
    return $(element).val() != $(element).attr("placeholder");
  }
}

If this isn't quite exact, it should point you in the right direction. I referenced the link: http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-expression

I had the same problem with different plugin, simpleWatermark. But surfing the net for the problem, I found a solution on this page Watermark plugin for jQuery.

The problem is with jquery chaining of events. The solution was to set the code to attach the watermark before validation is attached.

Hope this will help to others.

Find the following function in validate.js required:function(a,b,d)

Then replace the whole function with the following:

required:function(a,b,d){if(!this.depend(d,b))return"dependency-mismatch";switch(b.nodeName.toLowerCase()){case "select":return(a=c(b).val())&&a.length>0;case "input":if(this.checkable(b))return this.getLength(a,b)>0; /*default:return c.trim(a).length>0*/ default: if(typeof $.trim($(b).attr("placeholder")) != 'undefined') { return a != $.trim($(b).data("placeholder"))} else {return c.trim(a).length>0};}}