Question

I have this javascript which is working great –

var employeename = $("#employeename");
var employeenameInfo = $("#employeenameInfo");
employeename.blur(validateEmployeename);

function validateEmployeename(){
    //if it's NOT valid
    if(employeename.val().length < 4){
        employeename.addClass("error");
        employeenameInfo.text("We want names with more than 3 letters!");
        employeenameInfo.addClass("error");
        return false;
    }
    //if it's valid
    else{
        employeename.removeClass("error");
        employeenameInfo.text("Full Name.");
        employeenameInfo.removeClass("error");
        return true;
    }
}

However instead of having a big list of this functions for all my different fields I want to pass a field in e.g.

function validateGeneric(field){

However whatever I try just gives me errors and I’m really stuck. Any help appreciated. This also brings up another problem with the info field, any way I can store the orginal text and just restore that instead of a new string?

Answer 1

You can get the field that triggered the event using $(this). also you should put the info field as a sibling with an info class

$('input.to_be_validated').blur(validateInput);

function validateInput(e){
    var input = $(this)
    var info = input.parent.find('.info')
    //if it's NOT valid
    if(input.val().length < 4){
        input.addClass("error");
        info.text("We want names with more than 3 letters!");
        info.addClass("error");
        return false;
    }
    //if it's valid
    else{
        input.removeClass("error");
        info.text("Full Name.");
        info.removeClass("error");
        return true;
    }
}

Edit: forgot about the info field