jquery form validation

Question

I am using a jquery pluggin for a quick and easy form validation My forms use the input's default value as a label and I have a little onfocus and onblur javascript function to show and hide this when the user starts to type:

<input name='fnameREG' type='text' id='fnameREG' value='first name' size='70' onfocus='clearInput(this)' onblur='clearInput(this)' />
<input name='lnameREG' type='text' id='lnameREG' value='last name' size='70' onfocus='clearInput(this)' onblur='clearInput(this)' />

My issue with the validation is that when the submit button is clicked the pluggin thinks that all the fields are set because they have a default value. I looked but I couldn't find a supplied method to get round this. Thanks! ...Or has anyone come accross a better validation method?

And here is the .addmethod function for the pluggin which I am trying unsucessfuly to use to add a new method that checks for the default value. Any ideas???

jQuery.validator.addMethod("deflt", function(value, element) { 
        return this.optional(element) || value == value.defaultValue; 
    }, "You must enter a value");

Mark... below is my clearInput function. Yea it basically does the same as the watermark effect but I'm using this now and can't see much reason to switch. Although if I don't find another way I will use this, it would just involve deleting some markup:

function clearInput(field){
    if (field.defaultValue == field.value){
        field.value = '';
    }
    else if (field.value == ''){
        field.value = field.defaultValue;
    }
}

Answer 1

I'm not really sure what clearInput does, but are you looking for a watermark effect?

http://code.google.com/p/jquery-watermark/

Answer 2

Here is something I do on a client's site:

var default_values = new Array();
$(document).ready(function() {
    $("input.inputStyle, textarea").focus(function() {
        if(!default_values[this.id]) {
            default_values[this.id] = this.value;
        }
        if(this.value == default_values[this.id]) this.value = '';
    });
    $("#submit").click(function() {
        var error_queue = new Array();
        var errMessage = 'Please fill out the following fields:\n  + ';
        $("input.inputStyle, textarea").each(function(i) {
            if(!default_values[this.id]) {
                default_values[this.id] = this.value;
            }
            if(this.value == '' || this.value == default_values[this.id])
                error_queue[error_queue.length] = default_values[this.id];
        });
        if(error_queue.length > 0) {
            alert(errMessage + error_queue.join('\n  + '));
            return false;
        }
    });
});

Answer 3

Have you tried something like:

jQuery.validator.addMethod("deflt", function(value, element) { 
    return this.optional(element) || value == element.defaultValue; 
}, "You must enter a value");

"value" should be just the string value of the element, thus it would not have a "defaultValue" property, but "element" might have a "defaultValue"