Почему здесь не работает метод addClass jQuery?

Question

Environment

• Mozilla Firefox 20.0.1
• JQuery 1.7.1

У меня есть набор функций проверки:

var firstName = $('#FirstName'), 
    lastName = $('#LastName'), 
    dateOfBirth = $('#DateOfBirth'), 
    city = $('#City'), 
    phone = $('#Phone'), 
    email = $('#Email'), 
    insType = $('#InsType'), 
    otherInsType = $('#OtherInsType'), 
    insID = $('#InsID'), 
    service = $('#Service'), 
    otherService = $('#OtherService'), 
    comments = $('#Comments'), 
    outOfPocket = $('#OutOfPocket'), 
    permission = $('#Permission'), 
    signature = $('#Signature'); 

function formIsValid() { 
    if (missingRequiredField([ 
     firstName, lastName, dateOfBirth, city, phone, email, 
     insType, insID, service, comments, outOfPocket, permission, 
     signature 
    ])) { 
     alert('There is a missing required field.'); 
     return false; 
    } 

    alert('The form was valid.'); 

    return false; 
} 

function missingRequiredField(objs) { 
    var hasError = false; 
    objs.forEach(function(o) { 
     if (!$(o).val()) { 
      $(o).addClass('error'); 
      hasError = true; 
     } 
    }); 

    return hasError; 
} 

, и я знаю, что они работают, потому что, когда я оставьте поля пустыми, я получаю alert('There is a missing required field.');. Но по какой-то причине $(o).addClass('error'); фактически не добавляет класс. Я знаю, что класс работает, потому что, если я добавлю его вручную, визуальный стиль будет выглядеть так, как я хочу. Кроме того, я знаю, что это не добавление класса, потому что я проверяю элемент в Firebug после получения alert.

Я что-то упустил? Я думал, что это было прямолинейно, даже проверено с помощью документации jQuery, и это выглядит правильно.

Вот пример одного из полей в разметке, а также:

<div> 
    <label for="FirstName">First Name</label> 
    <input type="text" id="FirstName" name="FirstName" /> 
</div> 

EDIT

я даже вытащил forEach из в основной for петли и addClass до сих пор не принимают. Функция работает, потому что hasError возвращает true, когда поле не имеет значения - именно это упрямо addClass. ПРИМЕЧАНИЕ: В этой версии я снял ненужный $, окружающий o.

function missingRequiredField(objs) { 
    var hasError = false; 
    for (var i = 0; i < objs.length; i++) { 
     var o = objs[i]; 
     if (!o.val()) { 
      o.addClass('error'); 
      hasError = true; 
     } 
    } 

    return hasError; 
} 

Answer 1

JQuery селекторы работает до DOM готова, а это значит, ни один из элементов не выбраны (так как они не были построить еще).

Если вы выберете элементы после готовности DOM, он будет работать.

$(document).ready(function() { 
    firstName = $('#FirstName'); 
    lastName = $('#LastName'); 
}); 

Кроме того, как другие люди заявляли, вы должны преобразовать петлю .foreach() в обычную for петлю.

Смотрите следующий jsbin для примера:

http://jsbin.com/uzefeg/3/edit

Answer 2

Он работает в следующих jsFiddle Например: http://jsfiddle.net/nHHyQ/

Правда Я использую только одно поле для проверки. Я знаю, это звучит очевидно, но вы указали класс ошибок? Дважды проверьте орфографию и селектор в своем css.

Javascript: var firstName = $ ('# FirstName'); $ (document) .ready (function() { $ ('# test').щелкните (функция (e) { formIsValid(); }); });

function formIsValid() { 
    if (missingRequiredField([ 
    firstName])) { 
     alert('There is a missing required field.'); 
     return false; 
    } 

    alert('The form was valid.'); 

    return false; 
} 

function missingRequiredField(objs) { 
    var hasError = false; 
    objs.forEach(function (o) { 
     if (!$(o).val()) { 
      $(o).addClass('error'); 
      hasError = true; 
     } 
    }); 

    return hasError; 
} 

Answer 3

// этот код должны решить проблему

$(function(){ 
var firstName = $('#FirstName'), 
    lastName = $('#LastName'), 
    dateOfBirth = $('#DateOfBirth'), 
    city = $('#City'), 
    phone = $('#Phone'), 
    email = $('#Email'), 
    insType = $('#InsType'), 
    otherInsType = $('#OtherInsType'), 
    insID = $('#InsID'), 
    service = $('#Service'), 
    otherService = $('#OtherService'), 
    comments = $('#Comments'), 
    outOfPocket = $('#OutOfPocket'), 
    permission = $('#Permission'), 
    signature = $('#Signature'); 

function formIsValid() { 
    if (missingRequiredField([ 
     firstName, lastName, dateOfBirth, city, phone, email, 
     insType, insID, service, comments, outOfPocket, permission, 
     signature 
    ])) { 
     alert('There is a missing required field.'); 
     return false; 
    } 

    alert('The form was valid.'); 

    return false; 
} 

function missingRequiredField(objs) { 
    var hasError = false; 
    objs.forEach(function(o) { 
     if (!$(o).val()) { 
      $(o).addClass('error'); 
      hasError = true; 
     } 
    }); 

    return hasError; 
} 

});