环境

Question

环境

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');实际上并没有添加该类。我知道这个课程有效，因为如果我手工添加它，视觉风格看起来就像我想要的那样。此外，我知道它没有添加类，因为我在获取alert后检查了Firebug中的元素。

我在这里遗漏了什么吗？我认为这是直截了当 - 甚至用jQuery文档进行检查，它看起来对我来说。

以下是标记中某个字段的示例：

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

修改

我甚至将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'）。click（function（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;
}

});

为什么jQuery addClass方法不能在这里工作？

环境

修改

3 个答案: