jQuery Validation and Placeholder conflict

Question

I'm using the jQuery Validation plugin to validate a form on my site.

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

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

// 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 like it is supposed to.

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 like it is supposed to.

In unsupported browsers, in the event that there are errors, the appropriate fields get applied class="error" like usual -- but the placeholder text doesn't come back until the blur() event happens on a particular field. This leaves those fields blank -- and since there's no labels (just the placeholder attribute) users are left to guess at what each empty field is supposed to contain until the blur() event happens.

The other problem that unsupported browsers have is that since the placeholder fix modifies the value attribute to display the placeholder, fields that are marked as required pass validation when they should be failing.

It seems there's no easy way to use the Validation plugin with the placeholder support code.

I'm looking to either modify the placeholder support code or add a submitHandler: {} function as a parameter to the validate() function to get this working in unsupported browsers.

Solution 1

I ran into a similar issue. Have you gotten yours to work? I'd love to compare notes.

FWIW, here's what I did:

jsfiddle demo here.

Add input placeholders to the jQuery support object:

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

The placeholder 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 a 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 validate rules object

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

Solution 2

I think adding this to jquery.validate.js, to the required function (line 900), is best:

required: function(value, element, param) {

        // Our change
        if (element.value == element.defaultValue) {
            return false;
        }
        // End our change

Solution 3

Placeholder plugin update solved my issue :)

Solution 4

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

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

View more solutions

Comments

[Dzung Nguyen]

solve problem in one shot :D line 990 for the latest version of jquery validation since I post this message

[Dustin Silk]

finally found an easy fix. tx