Placeholders disapears after validation fails using jQuery Validate and jQuery Placeholder Enhanced

问题

I have a site with a formular containing several input fields. In all of these input fiedls I have the placeholder attribut containing some description. But as we all know the placeholder attribut doesn't work in IE, so I'm also using jQuery Placeholder Enhanced to make the placeholders show up in IE. This works.

But at the same time I'm using jQuery validate to validate my form. When I press the submit button and the validation fails, all og the placeholders are gone in IE.

My validation looks like this:

$(".myForm").validate({
    submitHandler: function (form) {
        $.post("/handlers/CustomHandler.ashx", $(".myForm").serialize(),
            function (data) {
                if (data.result.type == "message") {
                    $(".myForm").parent().html(data.result.data);
                }
                else if (data.result.type == "redirect") {
                    location.href = data.result.data;
                }
            }
        );
     }
});

I've tried using the invalidHandler option and firing the placeholderEnhanced()-function again like this:

$(".myForm").validate({
    submitHandler: function (form) {
        $.post("/handlers/CustomHandler.ashx", $(".myForm").serialize(),
            function (data) {
                if (data.result.type == "message") {
                    $(".myForm").parent().html(data.result.data);
                }
                else if (data.result.type == "redirect") {
                    location.href = data.result.data;
                }
            }
        );
     },
     invalidHandler: function () {
        if (!Modernizr.input.placeholder) {
            $('input[placeholder], textarea[placeholder]').placeholderEnhanced();
        }
     }
});

But unfortanetly it doesn't work. If i copy paste this line:

$('input[placeholder], textarea[placeholder]').placeholderEnhanced();

into my console in IE and firing it after the validation has found some errors, the placeholders are shown again. I've also tried putting in an alert("There was an error in the form"); inside the if-sentence and this is shown when pressing the submit button in the form.

Anyone have some clues to what could be wrong, and how I can make the placeholders not dissapearing in IE after pressing the Submit-button and the validation is not valid.

Thanks in advance!

/Kim

回答1:

Probably the issue is in this piece of code inside jquery.placeholder.js:

    // Blank on submit -- prevents submitting with unintended value
    this.form && $( this.form ).submit( function() {
      // $input.trigger( 'focus' ); would be problematic
      // because it actually focuses $input, leading
      // to nasty behavior in mobile browsers
      if ( $input.hasClass('placeholder') ) {
        $input
       .val( '' )
        .removeClass( 'placeholder' );
       }
    });

after triggering the validate method of jquery.validate jquery passes submit handling to this code. I commented out this code and placeholders stopped disappering in IE. I check placeholder-filled fields on the server side. But if you want to empty the values before submit, you should somehow prevent calling this method in case of submitting with errors. If I figure out where exactly, I will write here a comment.

来源：https://stackoverflow.com/questions/11152696/placeholders-disapears-after-validation-fails-using-jquery-validate-and-jquery-p

标签

jquery

forms

internet-explorer

validation

placeholder