CODEWITHSUNDEEP
jqueryvalidationplaceholder
Kaspars Milbergs
Kaspars Milbergs

Reputation: 784

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 display 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"
    }
  }
});

Upvotes: 2

Views: 3893

Answers (4)

Tejas Patil
Tejas Patil

Reputation: 52

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};}}

Upvotes: -1

Aleksandar Hocevar
Aleksandar Hocevar

Reputation: 61

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.

Upvotes: 0

Sara Chipps
Sara Chipps

Reputation: 9372

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('');
 }

Upvotes: 2

BradBrening
BradBrening

Reputation: 5518

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

Upvotes: 0

Related Questions