Question

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

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

});

Answer 1

我在你的jsFiddle中解决了三个问题。

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

1）删除克隆的input字段中的额外重复引号。

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();

Answer 2

我不确定这是否正是您所要求的，但是here's a link指向另一个解释如何在JavaScript中验证日期的stackoverflow帖子。

基本上，每当您使用任何语言处理日期时，您都希望尝试使用内置日期库。遗憾的是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 selector按ID进行选择。

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

Answer 3

删除一个额外的等于我修好了!!

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

jQuery验证动态的月和日输入

HTML

JS

3 个答案: