Question

I’ve looked at posts that ask how to do this, but I’m new to JQuery so I may be missing something that would help with how my form is set up.

I have a classic asp page with a search box that has a watermark “Employee Last Name” in the text box. I want to validate this field as required. The watermark is working fine, and the validation works fine, but won’t validate properly if the watermark is there. I guess it’s seeing the watermakr as an entered value?

Any tips on how I can keep my watermark and still validate this field? Here’s the code I’m using:

<script type="text/javascript">
//Form watermarks
    $(document).ready(function() {
        $('.watermarked_title').watermark('watermark');
    });
    </script>


    <script>
//Validation
    jQuery(document).ready(function(){
        // binds form submission and fields to the validation engine                    
        jQuery("#SearchForm").validationEngine();
    });

    </script>

Form code:

<form action="EmpSearch.asp" method="Post" id="SearchForm">                         
    <input name="SearchLN" id="SearchLN" type="text" size="22" class="validate[required] searchBox watermarked_title" title="Employee Last Name" >&nbsp;&nbsp;
    <input type="submit" class="button" Value="Search">                     
</form>

Answer 1

The watermark value should be cleared before submit:

Form submission – The plugin automatically cleans up all watermarks prior to form submission, so you should never need to manually remove watermarks before submit.

If you use it right…:

Using the Watermark and Validate plugins on the same elements

If you find that your form validation is failing because the watermarks are
not being cleared before validation occurs, then you need to adjust
the order in which you set up the watermarks and validation.

The proper order is to always set up watermarks before anything else
— especially before validation. That’s because jQuery carefully controls the order of events during form submission, and calls them in
the order they were set up. If you set up validation first, then the
form will be validated before the watermarks are cleared.

Setting up watermarks and validation in the proper order is as simple
as placing the lines of code in the correct order, like in the
following example:

$('#myElement').watermark('Required');
$('#myForm').validate();

source