Простейшая проверка jQuery | Только рамка и фон без текста?

Question

Я долго искал, как выполнить простейшую проверку jQuery.(Чтобы изменить цвет границы и фона) Вот и все, больше ничего!нет текста или что-то дополнительно.Я видел много способов, но код слишком длинный.

Вот пример длинного кода.Я не думаю, что это эффективный способ, если бы у меня было более 10 полей для проверки.

$(document).ready(function(){
//global vars
var form = $("#customform");
var name = $("#name");
var email = $("#email");

//On blur
name.blur(validateName);
email.blur(validateEmail);

//On key press
name.keyup(validateName);

//On Submitting
form.submit(function(){
    if(validateName() & validateEmail())
        return true
    else
        return false;
});

//validation functions
function validateEmail(){
    //testing regular expression
    var a = $("#email").val();
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    //if it's valid email
    if(filter.test(a)){
        email.removeClass("error");
        return true;
    }
    //if it's NOT valid
    else{
        email.addClass("error");
        return false;
    }
}
function validateName(){
    //if it's NOT valid
    if(name.val().length < 4){
        name.addClass("error");
        return false;
    }
    //if it's valid
    else{
        name.removeClass("error");
        return true;
    }
}
});

Answer 1

Пахнет так, как будто вам нужен какой-то рефакторинг и извлекать код, который все время повторяется, в свою собственную функцию:

function validateElement(element, condition) {
    if(condition){
        element.removeClass("error");
    }
    else {
        element.addClass("error");
    }
    return condition;
}

Используйте это так (я также рекомендую превратить ваши переменные в параметры, чтобывы можете использовать валидаторы в разных полях):

function validateEmail(field) {
    //testing regular expression
    var a = field.val(),
    filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    return validateElement(field, filter.test(a));
}

validateEmail($('#email'));