pfam_next_tab

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form id="form1">
    <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>

CSS

.error{
    border-color: #F78181;
    color:red;
    display:block;
}

JavaScript

$(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 name="jm' + i + '" 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) {
        if (value < 1 || value > 12) {
            return false;
        }
        return true;
    }, "Please enter a right month");

    $.validator.addMethod("dayCheck", function (value, element) {
        var mmValue1 = $(element).parent().prev('td').children('input').val();
        console.log(mmValue1);
        if (value < 1 || value > 31) {
            return false;
        } else if (mmValue1 == 2 && value > 29) { 
            return false;
...