0

我在使用 jQuery 验证来验证动态生成的月份和日期输入时遇到了麻烦。基本上，我想确保某些月份不能超过 30 天，而 2 月不能超过 29 天。当月份和日期输入固定时，我的方法效果很好。我很感激任何建议。这是一个演示。

HTML

<form method="post" id="form1" action=index.html>
    <table class="tab tab_Application" border="0">
        <tr>
            <th>
                <label for="id_noa">Number of Applications:</label>
            </th>
            <td>
                <select name="noa" id="id_noa">
                    <option value="">Make a selection</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
        <tr id='noa_header' style="display:none">
            <th>App#</th>
            <th>Month</th>
            <th>Day</th>
            <th>Mass Applied (kg/hA)</th>
            <th>Slow Release (1/day)</th>
        </tr>
    </table>
    <tr>
        <input type="submit" />
    </tr>
</form>

JS

$(document).ready(function () {

    $('#form1').validate({ // initialize the plugin
        submitHandler: function (form) {
            alert('valid form submitted');
            return false;
        },
        rules: {
            noa: "required"
        }
    });


    var i = 1
    $('#id_noa').change(function () {
        var total = $(this).val()
        $('#noa_header').show()
        while (i <= total) {
            $('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '"/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td><td><input type="text" size="5" name="ma' + i + '" id="id_ma' + i + '""/></td><td><input type="text" size="5" name="sr' + i + '" id="id_sr' + i + '" value="0""/></td></tr>');
            i = i + 1;
        }
        while (i - 1 > total) {
            $(".tab_Application tr:last").remove();
            i = i - 1
        }

        $('</table>').appendTo('.tab_Application');

        $('[name*="mm"]').each(function () {
            $(this).rules('add', {
                required: true,
                monthCheck: true
            });
        });

        $('[name*="dd"]').each(function () {
            $(this).rules('add', {
                required: true,
                dayCheck: true
            });
        });

    });

    ////define validation functions    

    $.validator.addMethod(
        "monthCheck",

    function (value) {
        return mmCheck(value);
    },
        "Please enter a right month");

    $.validator.addMethod(
        "dayCheck",

    function (value, element) {
        return ddCheck(value, element);
    },
        "Please enter a right day");

    function mmCheck(value) {
        var mmValue = value;
        if (mmValue < 1 || mmValue > 12) return false;
        return true;
    }

    function ddCheck(value, element) {
        var mmValue1 = $(element).closest("tr").find('input').val();
        var ddValue1 = value;
        if (ddValue1 < 1 || ddValue1 > 31) return false;
        else if (mmValue1 === 2 && ddValue1 > 29) return false;
        else if ((mmValue1 === 4 || mmValue === 6 || mmValue1 === 9 || mmValue1 === 11) && (ddValue1 > 30)) return false;
        return true;
    }

});
4

3 回答 3

2

我在您的 jsFiddle 中修复了三个问题。

http://jsfiddle.net/vMW37/11/

input1) 删除了克隆字段中多余的重复引号。

2）name为您的第一个字段添加了一个属性input。即使它没有经过验证，它仍然必须包含一个name属性。

3) 此行中的语法错误，请注意mmValue === 6缺少1...

else if ((mmValue1 === 4 || mmValue === 6 || mmValue1 === 9 || mmValue1 === 11) && (value > 30))

注意事项：

此行不正确，因此任何后续逻辑使用mmValue1都会意外失败。

var mmValue1 = $(element).closest("tr").find('input').val();

试试这个：

var mmValue1 = $(element).parent().prev('td').children('input').val();
于 2013-03-02T04:35:01.227 回答
1

我不确定这是否正是您所要求的，但这里有一个指向不同 stackoverflow 帖子的链接，该帖子解释了如何在 JavaScript 中验证日期。

基本上，每当您处理任何语言的日期时，您都想尝试使用内置日期库。不幸的是，JavaScript 的日期库很尴尬，但它仍然可用，你的 ddCheck 函数会变成这样：

function ddCheck(value, element) {
    var mmValue1 = $(element).closest("tr").find('input').val();
    var ddValue1 = value;
    var currentYear = new Date().getFullYear();
    var dateEntered = new Date(currentYear, mmValue1, ddValue1);

    return dateEntered.getDate() == ddValue1 && dateEntered.getMonth() == mmValue1 && dateEntered.getFullYear() == currentYear;
}

ddCheck 的第 1 行在选择月份输入时也有错误。

var mmValue1 = $(element).closest("tr").find('input').val();

这个选择器不够具体，您总是返回第一个字段的值，即您所在月份的应用程序编号。您可以向月份添加一个类，因此代码如下所示：

var mmValue1 = $(element).closest("tr").find('.j-month').val();

或者您可以使用starts-with 选择器按id 进行选择。

*编辑：我从返回中删除了三等号，因为我不想在此示例中也包含整数验证。

于 2013-03-02T04:26:44.423 回答
1

删除一个额外的等于我把它修好了！！

$.validator.addMethod(

    "dobday",
    function(value,element){
        return ddCheck(value, element);
    }



);
function ddCheck(value, element) {
    var mmValue1 = $('#edit-month').val();
    //alert(mmValue1);
   // var dayval = $('#edit-date').val();
    var ddValue1 = value;

    if (ddValue1 < 1 || ddValue1 > 31) return false;
    if (mmValue1 == 2 && ddValue1 > 29) return false;
    else if ((mmValue1 == 4 || mmValue1 == 6 || mmValue1 == 9 || mmValue1 == 11) && (ddValue1 > 30)) return false;
    else         return true;
}
于 2013-03-06T12:16:52.390 回答