如何使用jquery validate plugin

Question

我在一个具有相同名称的表单中有一个文本输入列表，就像在输入元素数组中一样。我如何使用jquery验证插件来验证每个输入元素。下面是我到目前为止所做的事情的片段。

HTML

<?php echo form_open('setup/new_session_validate/'.$school->university_alias, 'class="cmxform form-horizontal tasi-form" id="school_form" method="post"') ?>
        <div class="form-group">
            <label for="session_name" class="col-sm-2 control-label">Session title</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="session_name" name="session_name" />
            </div>
        </div>
        <div class="form-group">
            <label for="session_start_date" class="col-sm- col-sm-2 control-label">Start date for session</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="session_start_date" name="session_start_date" />
            </div>
            <label for="session_end_date" class="col-sm-4 col-sm-2 control-label">End date for session</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="session_end_date" name="session_end_date" />
            </div>
        </div>
        <header class="panel-heading grey">
            Semester 1
        </header>
        <div class="panel-body" style="border-bottom:1px solid #eee; padding:2% 0% 2% 0%">
            <div class="form-group">
                <label for="semester_1_start" class="col-sm-2 control-label">Start date</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control semester_start_dates" id="semester_1_start" src="1" name="semester_start_dates[]" />
                </div>
                <label for="semester_1_end" class="col-sm-2 control-label">End date</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control semester_end_dates" id="semester_1_end" src="1" name="semester_end_dates[]" />
                </div>
            </div>
        </div>
        <header class="panel-heading grey">
            Semester 2
        </header>
        <div class="panel-body" style="border-bottom:1px solid #eee; padding:2% 0% 2% 0%">
            <div class="form-group" style="">
                <label for="semester_2_start" class="col-sm-2 control-label">Start date</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control semester_start_dates" id="semester_2_start" src="2" name="semester_start_dates[]" />
                </div>
                <label for="semester_2_end" class="col-sm-2 control-label">End date</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control semester_end_dates" id="semester_2_end" src="2" name="semester_end_dates[]" />
                </div>
            </div>
        </div>
        <div class="panel-body" style="">
            <div class="form-group">
                <div class="col-sm-1">
                    <button type="button" class="btn btn-danger close_session_form">Cancel</button>
                </div>
                <div class="col-sm-1 pull-right">
                    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
                </div>
            </div>
        </div>

的javascript

$.validator.setDefaults({
    submitHandler: function(form){
        form.submit();
    },
    ignore: [],
});
// validate school form on submit

$('#submit').click(function(){
    $("#school_form").validate({
        rules: {
            session_name: "required",
            session_start_date: "required",
            session_end_date: "required",
        },
        messages: {
            session_name: "Please enter an identification for the session",
            session_start_date: "Please enter a start date for the session",
            session_end_date: "Please enter a end date for the session",
        }
    });
    var i = 1;
    $(".semester_start_dates").each(function(){
        $("#semester_"+i+"_start").rules("add", {
            required: true,
            messages: {
                required: "Please enter a start date for semester "+i+" of the session"
            }
        });
        $("#school_form").validate().element("#semester_"+i+"_start");
        i++;            
    });
    var j = 1;
    $(".semester_end_dates").each(function(){
        $("#semester_"+j+"_end").rules("add", {
            required: true,
            messages: {
                required: "Please enter an end date for semester "+j+" of the session"
            }
        });
        $("#school_form").validate().element("#semester_"+j+"_end");
        j++;            
    });
});

请注意，它会尝试验证元素，但错误信息放置会出现故障。