CODEWITHSUNDEEP
jqueryformsvalidationinternet-explorerplaceholder
agapitocandemor
agapitocandemor

Reputation: 744

Placeholder issue on validation with IE9, jquery plugin/html

I'm using a jquery plugin to have input text placeholders on IE9, and it's giving me a problem.

There's a page where user can select one username picking it up or writing a custom one in a text field. This plugin adds a value attribute to this input text on IE9 to simulate the placeholder. Everything fine, but..

I'm getting a validation error as if the input text would've been filled incorrecty, incorrectly filled with the fake placeholder, which is sent to the form. I'm trying to remove that attribute from the input if using IE9 when form is submitted but either removing the attributes nor triggering a reset with jquery is working. I tried a few things, but no luck..

I would like to clear or remove that value sent to the form if the value attribute equals the content of what's supposed to be the placeholder ('Type Username' in this case), is it possible to reset or remove the value of an input from a submit event before sending it?

I tried things like this:

jQuery('button[type=submit]').on('click', function() {

    if (jQuery('#customUsername').val().indexOf('Type Username') >= 0 ) {
        jQuery('#customUsername').trigger('reset');
        jQuery('#customUsername').removeAttr('value');
        jQuery('#customUsername').removeAttr('placeholder');
    }

});

but it's being sent and getting validation error...

Thanks a lot!

Upvotes: 1

Views: 503

Answers (1)

Raptor
Raptor

Reputation: 54248

Since a <button type="submit"> by default will submit the form, you should remove the default behavior by event.preventDefault() first, then do the actions you want. Finally, you can submit the form by .submit() function. Sample code is as follow:

$('button[type=submit]').click(function( event ) {
  event.preventDefault();
  if ($('#customUsername').val().indexOf('Type Username') >= 0 ) {
        $('#customUsername').trigger('reset');
        $('#customUsername').removeAttr('value');
        $('#customUsername').removeAttr('placeholder');
        $('#frm').submit();
    }
});

Upvotes: 1

Related Questions