JQuery Validation and Placeholder Conflict

Question

I use the jQuery Validation plugin to validate the form on my site.

http://docs.jquery.com/Plugins/Validation

I also use the following code to provide Placeholder support for browsers that do not support the HTML5 attribute placeholder="" .

 // To detect native support for the HTML5 placeholder attribute var fakeInput = document.createElement("input"), placeHolderSupport = ("placeholder" in fakeInput); // Applies placeholder attribute behavior in web browsers that don't support it if (!placeHolderSupport) { $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '') { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur().parents('form').submit(function() { $(this).find('[placeholder]').each(function() { //line 20 var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }); }); } 

When I submit my form, the following things happen:

In browsers that support the placeholder attribute, the validate() function fires and everything works as expected.

In browsers that do not support the placeholder attribute, lines 20-25 clear all the placeholders, and then the validate() function fires. If there are no errors, the page submits, and everything works as expected.

In unsupported browsers, in case of errors, the corresponding fields will be applied as class="error" as usual, but the placeholder text is not returned until the blur() event occurs in a specific field. This leaves these fields empty, and since there are no labels (only the placeholder attribute), users must guess what each empty field should contain until the blur() event occurs.

Another issue that browsers are not supported with is that because the placeholder fix changes the value attribute to display the placeholder, fields marked as required pass validation when they should fail.

There seems to be no easy way to use the Validation plugin with placeholder support code.

I want to either modify the placeholder support code or add the submitHandler: {} function as a parameter to the validate() function so that this works in unsupported browsers.

Answer 1

I had a similar problem. Have you earned I would like to compare notes.

FWIW, here is what I did:

jsfiddle demo here .

Add placeholders to jQuery support object:

 $.support.placeholder = (function() { var i = document.createElement( 'input' ); return 'placeholder' in i; })(); 

Aggregate Chain:

 $('input') .addClass('hint') .val( function() { if ( !$.support.placeholder ) { return $(this).attr('placeholder'); } }) .bind({ focus: function() { var $this = $(this); $this.removeClass('hint'); if ( $this.val() === $this.attr('placeholder') ) { $this.val(''); } }, blur: function() { var $this = $(this), // Trim whitespace if only space characters are entered, // which breaks the placeholders. val = $.trim( $this.val() ), ph = $this.attr('placeholder'); if ( val === ph || val === '' ) { $this.addClass('hint').val(''); if ( !$.support.placeholder ) { $this.val(ph); } } } }); 

Add New Validation Rule

addMethod docs

 $.validator.addMethod('notPlaceholder', function(val, el) { return this.optional(el) || ( val !== $(el).attr('placeholder') ); }, $.validator.messages.required); 

Include the new method in the validation rule object

 $('form').validate({ rules: { name: { required: true, notPlaceholder: true }, email: { required: true, notPlaceholder: true, email: true } } }); 

Answer 2

I think adding this parameter in jquery.validate.js to the required function (line 900) is better:

 required: function(value, element, param) { // Our change if (element.value == element.defaultValue) { return false; } // End our change 

Answer 3

you can solve this by binding it to the submit function (either through jQuery validation or manually)

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

Answer 4

Placeholder plugin update solved my problem :)