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 の 3 つの問題を修正しました。

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();
于 2013-03-02T04:35:01.227 に答える
1

余分なものを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 に答える
1

これがまさにあなたが求めているものかどうかはわかりませんが、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 セレクターを使用して ID で選択することもできます。

*編集: この例にも整数の検証を含めたくなかったので、戻り値からトリプル イコールを削除しました。

于 2013-03-02T04:26:44.423 に答える