Можно ли провести рефакторинг этой проверки jQuery?

Question

Я делаю некоторую простую проверку на стороне клиента с помощью jQuery.

var passedValidation = new Boolean(true);

// Required Field Validators.
if ($('#fbsignup input.firstName').val().trim() == '') {
    $('#fbsignup tr.firstName em').show();
    passedValidation = false;
}
if ($('#fbsignup input.lastName').val().trim() == '') {
    $('#fbsignup tr.lastName em').show();
    passedValidation = false;
}
if ($('#fbsignup input.email').val().trim() == '') {
    $('#fbsignup tr.email em').show();
    passedValidation = false;
}
if ($('#fbsignup input.password').val().trim() == '') {
    $('#fbsignup tr.password em').show();
    passedValidation = false;
}
if ($('#fbsignup input.screenName').val().trim() == '') {
    $('#fbsignup tr.screenName em').show();
    passedValidation = false;
}


if (passedValidation == true) {
    // All validation passed. Hide the modal signup dialog and post back to signup user.
    $('#fbcSignupModal').jqmHide();
    return true;
} else {
    return false;
}

По сути, я хочу убедиться, что все поля заполнены. Если нет, верните false, иначе верните true.Простой.

Может ли это быть реорганизовано в одну строку?(возможно, применяя класс ко всем элементам?).

Предостережение в ответе, я НЕ хочу использовать плагин jquery-validate.Я знаю, это круто, но это не очень сложная проверка, и я не хочу влиять на остальную часть формы (это модальное всплывающее окно).

Итак, как говорится, есть идеи?

РЕДАКТИРОВАТЬ

Просто чтобы уточнить, мне нужно знать , какое поле не заполнено, поэтому я могу показать * рядом с ним.

EDIT2

Обновлен исходный код, чтобы указать, что мне нужно показать обязательную метку поля и вернуть false в случае сбоя проверки.

EDIT3

Хорошо, я переосмыслил свое решение, и, похоже, мне нужно будет выполнить серверный вызов, чтобы проверить электронную почту по схеме членства.Так что я, вероятно, собираюсь в конечном итоге либо обернуть поля в панели обновления, либо сделать пост веб-службы (и вернуть ошибки в массиве json).Тем не менее, я оставлю этот вопрос открытым на некоторое время и выберу ответ с наибольшим количеством голосов.

ОТВЕТ

Итак, я перешел к модифицированной версииответ @ box9.Мне все еще нужно будет выполнить AJAX-вызов на сервер для проверки электронной почты (как подсказывает мое редактирование выше), но это гарантирует, что я сделаю это, только если все поля заполнены.

$('#fbsignup input.required').each(function (index) {
        if ($(this).val().trim() == '') {
            $(this).next('em').show();
            passedValidation = false;
        }
    });

IУ меня есть элемент em непосредственно после обязательных полей ввода, поэтому я могу легко использовать селектор .next([selector]) jQuery.

Приятно и просто.

Спасибо всемответы.

Answer 1

Следующий код делает именно то, что делает ваш код:

var passedValidation = true;

$('#fbsignup input').each(function(index) {
    if ($(this).val().trim() == '') {
        $('#fbsignup tr').filter('.' + $(this).attr('class').split(' ').slice(0, 1)).find('em').show();
        passedValidation = false;
    }
});

if (passedValidation) $('#fbcSignupModal').jqmHide();

return passedValidation;

... за исключением одного предупреждения: оно будет работать только в том случае, если классы "firstName", "lastName" и т. Д. ... являются ПЕРВЫМ классом в атрибутах класса ваших входных данных. Это ограничение и запутанная строка $('#fbsignup tr').filter('.' + $(this).attr('class').split(' ').slice(0, 1)).find('em').show(); существуют только потому, что я не знаю структуру вашего HTML. Селекторы могут быть намного чище (используя .sibling(), .children(), .parent() и т. Д., Если известна структура HTML.

В качестве альтернативы, включите массив всех имен классов ваших входных данных:

var inputClasses = ['firstName', 'lastName', 'email', 'password', 'screenName'];

И еще раз:

var passedValidation = true;

$.each(inputClasses, function(index, className) {
    if ($('#fbsignup').find('input.' + className).val().trim() == '') {
        $('#fbsignup').find('tr.' + className + ' em').show();
        passedValidation = false;
    }
});

if (passedValidation) $('#fbcSignupModal').jqmHide();

return passedValidation;

Недостатком является то, что вам придется вручную обновлять массив, если вы измените / добавите входные данные. Лучше всего, вероятно, изменить мое первое решение, используя известную структуру вашего HTML, или даже преобразовать классы в идентификаторы.

Answer 2

function validate() {
    var fields = ['firstName', 'lastName', 'email', 'password', 'screenName'];
    for(fieldIdx in fields) {
        if($('#fbsignup input.' + fields[fieldIdx]).val().trim()) == '' {
            $('#fbsignup input.' + fields[fieldIdx]).after("*");
            return false;
        }
    }
    return true;
}

Это делает то, что вы хотите, но имеет недостаток, заключающийся в потере информации о поле которого было неудачным подтверждением (например, если вы хотите получить всплывающее сообщение для определенного поля).

Answer 3

Я рекомендую вам использовать этот плагин проверки jquery , он прост в использовании и мощный ..

Answer 4

Нечто подобное должно работать на вас.

var failedElements = $("#fbsignup input").filter(".firstname[value=''], .lastname[value=''], .email[value='']");

Вот пример:

http://jsfiddle.net/zfQbz/

РЕДАКТИРОВАТЬ: Я только что заметил, что вы снова редактировали вопрос.Поэтому, если вы хотите выполнить действие для каждого элемента, который не удалось, просто используйте цикл for, чтобы выполнить итерацию всех элементов в коллекции и сделать то, что вам нужно для каждого.

Answer 5

Если вы хотите проверить, заполнены ли все поля, просто выполните:

function validate() {
    ret = true;
    $('#fbsignup input').each(function(index) {
      if ($(this).val().trim()) == '') ret = false;
    });    
    return ret;
}