placeholder issue with jQuery Validate

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

Example:

<div class="sort left">
<label for="username" class="inlineelement">Username</label>
<input id="registername"  type="text" placeholder="your name" autocomplete="off" class="required"></input>

I noticed that , if we validate our form using jquery Validate ( http://docs.jquery.com/Plugins/Validation/Methods )

Is there a work around for this, or should be go back to focus 开发者_开发百科html ( placeholder text ) within our form fields ?

I was coming across the same issue. After some messing around, found a workaround with this custom method. This custom method will accommodate placeholders.

jQuery.validator.addMethod("placeholder", function(value, element) {
  return value!=$(element).attr("placeholder");
}, jQuery.validator.messages.required);

Tag this line at the end of the additional-methods.js file.

You'll then use it as follows:

$("form").validate({
  rules: {
    username: {required: true, placeholder: true},
  },
  message: {
    username: {
      required: "Username required", placeholder: "Username required",
    },
  }
});

This is generic way of validating placeholders (use following code AFTER validation logic initialization). It works by injecting custom logic into all validation methods.

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

You could script around it perhaps.

This will remove placeholder attribute on submit, and restore them in the event of an error.

var placeholders = {};
$('form').validate({
   submitHandler: function(form) {

       $(form).find(':input[placeholder]').each(function() {
          var placeholder = $(this).attr('placeholder'); 
          placeholders[placeholder] = this;
          $(this).removeAttr('placeholder');
       });       

       form.submit();
   },

   invalidHandler: function() {

      $.each(placeholders, function(placeholder, element) {
          $(element).attr('placeholder', placeholder);
      });

   }

});

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.

My quick solution:

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

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

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

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

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

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