placeholder issue with jQuery Validate

Question

I noticed today that we have an issue with jquery Validate when used in conjunction with placeholder text.

Example:

&         


        
                      

              相关标签:
       
      

Answer 1

My quick solution:

            $(".validateForm").submit(function(){
            $(this).find("input[type=text]").each(function(){
                if($(this).attr("placeholder") == $(this).val())$(this).val("");
            })
        })

Answer 2

Try the latest version of jquery.validate from http://jqueryvalidation.org/

version 1.11.1 seems to have solved this issue for me =D

Answer 3

$("form").validate();
    $(function () {
                $.each($.validator.methods, function (key, value) {
                $.validator.methods[key] = function () {
                var el = $(arguments[1]);
                if (el.is('[placeholder]') && arguments[0] == el.attr('placeholder'))
                    arguments[0] = '';
                    return value.apply(this, arguments);
                    };
                 });
      });

Answer 4

I used a trick, if you focus on the field, the placeholder appears.. The following code will focus and blur all of the input fields.

function tabFields(){
    $('#form input[type="text"]').each(function(){
        $(this).focus().blur();
    });
}

Answer 5

I had similar issue with a form i am working on. You can use the jq-watermark plug-in to do your placeholders/watermarks.

It works with jQuery Validate plug-in, i.e. doesn't obstruct validation.

Answer 6

I found that if you add custom rules ie: email:true, then the validation is not ignored. So if you look in additional-methods.js which comes bundled with the jquery validation download, there is a rule called alphanumeric. This has all of the default required functionality. Just use this custom rule and it should work. I am using http://widgetulous.com/placeholderjs/ for placeholder support on older browsers. Cheers