Question

I have a form that has values prefilled for usability/hints – unfortunately one of these fields validated against a servlet that I don’t have access to.

So when I use:

<input type="text" class="promocode" name="LLN" id="promo1" value="Enter promotion code" maxlength="40"  title="Promotion Code 1" onfocus="this.value=''; this.onfocus=null;">

This doesn’t work, because the validation servlet sees that the field has been filled, and it then runs it through the validation process and returns an error (because it’s not the correct format).

I know if I had some js to work with I could have it only run validation against values not the default.

But in this case, I’m not sure how to show the form field hints without filling in a value.

Thoughts?

Answer 1

A quick solution would be adding an <span> on top of your input and hiding it when the input got the focus. This would not even touch the input.
You can position span using relative/absolute.
I hope you like this solution

HTML

<div class="inputContainer">
  <input type="text" id="theInput" />
  <span id="theSpan">Please fill this input!</span>
</div>

CSS:

 .inputContainer{position:relative;}
 #theSpan{position:absolute; top:0; left:0}

JS

    $('#theInput').focus(function(){
        $('#theSPan').hide()
    });
  $('#theInput').blur(function(){
       if($(this).val()==''){ $('#theSPan').show()}
    });