2

环境

  • 火狐 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.

我在这里错过了什么吗？我认为这是直截了当的——甚至检查了 jQuery 文档，它看起来对我来说是正确的。

以下是标记中的字段之一的示例：

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

编辑

我什至把它拉到forEach一个基本的for循环中，但addClass仍然没有。该函数正在工作，因为当字段没有值时hasError返回- 只是那个 stubborn 。注意：我确实在这个版本中去掉了不必要的周围。trueaddClass$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;
}
4

3 回答 3

2

jQuery 选择器在 DOM 准备好之前运行，这意味着没有选择任何元素（因为它们尚未构建）。

如果您在 DOM 准备好后选择元素，它就可以工作。

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

此外，正如其他人所说，您应该将.foreach()循环转换为常规for循环。

有关示例，请参见以下 jsbin：

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

于 2013-05-09T16:08:26.207 回答
0

它适用于以下 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;
}
于 2013-05-09T16:16:17.237 回答
0

//这段代码应该可以解决问题

$(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;
}

});
于 2013-05-09T16:37:28.970 回答