JQuery验证，MVC，Bootstrap Modal无法提交

Question

我整天都被困在这一天，因为它应该很简单，因为它应该很简单。

Jquery验证在这个视图上对我不起作用（Ajax调用填充下拉列表）。

查看 -

<div id="popupEventForm" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">×</button>
                <input type="hidden" id="customId">
                <h4 class="modal-title">New Event</h4>
            </div>
            <div class="modal-body center-block">
                <form id="loginForm" method="post" class="form-horizontal">
                    <!--UserDetails-->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group has-feedback col-md-12">
                                @Html.DropDownListFor(x => x.StaffID, new SelectList(string.Empty, "Value", "Text"), "Select User", htmlAttributes: new { @class = "form-control", id = "StaffID" })

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group has-feedback col-md-12">
                                @Html.DropDownListFor(x => x.SelectRole, new SelectList(string.Empty, "Value", "Text"), "Select Role", htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="inputsm">Event Title:</label>
                        <input class="form-control input-sm" id="title" name="title" type="text" disabled>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Description:</label>
                        <textarea class="form-control" id="customdescription" name="customdescription"></textarea>
                    </div>
                    <!--SicknessType-->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group has-feedback col-md-12">
                                @Html.DropDownListFor(x => x.SicknessType, new SelectList(string.Empty, "Value", "Text"), "Select Leave Type", htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                        <!--SicknessSubTyoe-->
                        <div class="col-md-6">
                            <div class="input-group has-feedback col-md-12">
                                @Html.DropDownListFor(x => x.SicknessSubType, new SelectList(string.Empty, "Value", "Text"), "Select Leave Sub Type", htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <br />
                    <!--DatePicker-->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group has-feedback">
                                @Html.TextBoxFor(x => x.StartDate, new { @class = "form-control", @placeholder = "Leave Start Date", id = "LeaveStart" })
                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group has-feedback">
                                @Html.TextBoxFor(x => x.EndDate, new { @class = "form-control", @placeholder = "Leave End Date", id = "LeaveFinish" })
                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group has-feedback col-md-12">
                                @Html.DropDownListFor(x => x.EventStatus, new SelectList(string.Empty, "Value", "Text"), "Event Status", htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="modal-footer">
                        <button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
                        <button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

验证脚本 -

$(function () {
$('loginForm').validate({
    rules: {              
        StaffID: {
            required: true
        },
        SelectRole: {
            required: true
        },            
        customdescription: {
            required: true
        },
        SicknessType: {
            required: true
        },
        SicknessSubType: {
            required: true
        },
        StartDate: {
            required: true                  
        },
        EndDate: {
            required: true                   
        },
        EventStatus: {
            required: true                    
        },
    },
    /*MESSAGES*/
    messages: {               
        StaffID: {
            required: "Please select staff"
        },
        SelectRole: {
            required: "Please select a role"
        },            
        customdescription: {
            required: "Please enter leave"
        },
        SicknessType: {
            required: "Please select a leave type"
        },
        SicknessSubType: {
            required: "Please select a leave type"
        },
        StartDate: {
            required: "Please Enter a start date"
        },
        EndDate: {
            required: "Please Enter an end date"                   
        },
        EventStatus: {
            required: "Please confirm a status"                    
        },                 
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

}）;

我觉得我的日子已经在这里绕圈子所以任何帮助和另一只眼睛＆＃34;会很棒的。