Home/ Questions/Q 8977927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:29:11+00:00

I am building a jQuery form validation plugin. The script uses the title attribute

  • 0

I am building a jQuery form validation plugin. The script uses the title attribute to label the input field. This led to swapping out the input password for input text for the field title to be readable.

$(FormID).find('input:password').each(function() {  
    $("<input type='text'>").attr({ name: this.name, value: this.value, title: this.title, id: this.id }).insertBefore(this); 
}).remove();

When I click on the password input box it works as expected. The following code swaps out the text input for a password input, removes the label, applies the appropriate style and focus.

$(":input").focus(function(){//Clears any fields in the form when the user clicks on them       
   if ($(this).hasClass("va") ) {
        $(this).val('');
        $(this).removeClass("va").addClass('focused');
   }
});
$(':input[title]').each(function() {//Add the title attribute to input fields and disappear when focused 

    if($(this).val() === '') {
        $(this).val($(this).attr('title')); 
    }

    $(this).focus(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).val('').addClass('focused');
        }
        if ($(this).attr('id')=="pass1" || $(this).attr('id')=="pass2") {
            $("<input type='password'>").attr({ name: this.name, title: this.title, id: this.id }).insertAfter(this).prev().remove();
            $("#"+$(this).attr('id')).focus().addClass('focused');
        }
    });

    $(this).blur(function() {
        if($(this).val() === '') {
            $(this).val($(this).attr('title')).removeClass('focused');
        }
        if ($(this).attr('id')=="pass1" || $(this).attr('id')=="pass2") {
            $("<input type='text'>").attr({ name: this.name, value: this.value, title: passtitle, id: this.id }).insertAfter(this).prev().remove();
            $("#"+$(this).attr('id')).blur().removeClass('focused');
        }
    });
});

The blur function won’t fire when the user clicks outside the focused input box. How do I get it to blur like the other form elements?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Update: After re-reading your question more thoroughly I’m changing my answer.

    You’re basically trying to make the “title” of the input element appear in the box when the input is not focused. This is a common thing to do but your approach is outdated. I suggest using the HTML5 “placeholder” attribute instead. It’s native to any modern browser (I have a solution for older browsers and IE). However, you still won’t be able to show the placeholder text in a password field. Generally this shouldn’t really be required or even done at all in my opinion. Password fields generally have a slightly different appearance than normal text fields so changing the input may cause slight display glitches.

    To use a placeholder simply build your input like this: 

    <input name="username" placeholder="Username" type="text" />

    The “placeholder” attribute will be used to populate the displayed text in the input but it has no affect on the actual value of the input.

    To fix IE’s lack of support I created the following jquery placeholder plugin on github awhile ago.

    Now, here is a full working example which is cleaner than your original solution. I’ve tested it in FF17 and IE9. Notice the password input actually starts out as a TEXT field so the placeholder will be shown by default. It only changes to a PASSWORD if the user focuses and enters something.

    <!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.placeholder.js" type="text/javascript"></script>
</head>

<body>
    <form>
        <input name="username" placeholder="Username" type="text" />
        <input name="password" placeholder="Password" type="text" data-ispw="1" />
    </form>
</body>

<script type="text/javascript">
$(function(){
    // make sure to include the jquery.placeholder.js plugin before using this
    $(':text[placeholder]').placeholder();
    $('form').on({
        focus: function(e){
            // swap to password
            $(this).prop('type', 'password');
        },
        blur: function(e){
            var me = $(this);
            if (me.val() == '') {
                // swap to text; if no value is entered
                me.prop('type', 'text');
            }
        }
    }, ':input[data-ispw]')
});
</script>
</html>

    Let me re-iterate that I don’t like the idea of swapping the password input like this, but hey, to each their own! Good luck!

    • 0