MVC3:Jquery Validate和AJAX无法正常工作

时间:2013-10-08 13:25:23

标签: jquery ajax vb.net asp.net-mvc-3

我搜索了之前提出的所有问题并尝试了所有方法,但没有任何效果。我正在尝试让Jquery验证和ajax一起工作。基本上,ajax正在阻止验证的发生。另外:提交时(无论是否为空),框变为绿色。这是代码:

<script type="text/javascript">

    function loadPage(urlToLoad, typeToLoad){
                   $.ajax({
                    url: urlToLoad,
                    type: typeToLoad,
                    data: $(this).serialize(),
                    success: function (data) {
                        $("#resultsMainWindow").html(data); 
                        },
                     dataType: "html"
                });

    }

    $(document).ready(function () {

    $.validator.unobtrusive.parse($('#ZipForm'));
    $.validator.unobtrusive.parse($('#ParishForm'));  
    $.validator.unobtrusive.parse($('#CityForm'));
    $.validator.unobtrusive.parse($('#AgentNameForm'));

        $('#ZipForm').submit(function () {
            if ($(this).valid()) {
                loadPage(this.action, this.method);
            }
            return false;
        });

        $('#CityForm').submit(function () {
            if ($(this).valid()) {
                loadPage(this.action, this.method);
            }
            return false;
        });

          $('#ParishForm').submit(function () {
            if ($(this).valid()) {
               loadPage(this.action, this.method);
            }
           return false;
        });

        $('#AgentNameForm').submit(function () {
            if ($(this).valid()) {
                loadPage(this.action, this.method);
            }
            return false;
        });

        $("#findAgentTabs").tabs();

        jQuery.validator.addMethod("zipcodeUS", function (value, element) {
            return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value);
        }, "The specified US ZIP Code is invalid");

        $("#ZipForm").validate({
            rules: {
                txtZip: {
                    required: true,
                    minlength: 5,
                    zipcodeUS: true
                }
            },
            messages: {
                txtZip: { minlength: "Zip code must be at least 5 digits.", required: "Please enter a valid zip code.", zipcodeUS: "Please enter a valid zip code." }
            },
            submitHandler: function (form) {
                form.submit();
            },
            highlight: function (element) {
                $(element).closest('input').removeClass('success').addClass('error');
            },
            success: function (element) {
                $(element).closest('input').removeClass('error').addClass('success');
            }
        });

        $("#CityForm").validate({
            rules: {
                txtCity: "required",
                ddlState: "required"
            },

            messages: {
                txtCity: "Please enter a city name.",
                ddlState: "Please select a state."
            },
            submitHandler: function (form) {
                form.submit();
            },
            highlight: function (element) {
                $(element).closest('input').removeClass('success').addClass('error');
                $(element).closest('select').removeClass('success').addClass('error');
            },
            success: function (element) {
                $(element).closest('input').removeClass('error').addClass('success');
                $(element).closest('select').removeClass('error').addClass('success');
            }
        });

        $("#ParishForm").validate({
            rules: {
                ddlParish: "required"
            },
            messages: {
                ddlParish: "Please select a parish."
            },
            submitHandler: function (form) {
                form.submit();
            },
            highlight: function (element) {
                $(element).closest('input').removeClass('success').addClass('error');
                $(element).closest('select').removeClass('success').addClass('error');
            },
            success: function (element) {
                $(element).closest('input').removeClass('error').addClass('success');
                $(element).closest('select').removeClass('error').addClass('success');
            }
        });

        $("#AgentNameForm").validate({
            rules: {
                txtName: "required"
            },
            messages: {
                txtName: "Please enter an agents last name."
            },
            submitHandler: function (form) {
                form.submit();
            },
            highlight: function (element) {
                $(element).closest('input').removeClass('success').addClass('error');
            },
            success: function (element) {
                $(element).closest('input').removeClass('error').addClass('success');
            }
        });

    });
</script>

以下是其中一个标签的HTML:

                        <div id="ParishTab">
                        @Using (Ajax.BeginForm("FindAgentByParish", "FindAgent", New With {.id = "ParishForm"}, New AjaxOptions With { _
                                     .HttpMethod = "Post", _
                                     .OnBegin = "ajaxValidate", _
                                     .InsertionMode = InsertionMode.Replace, _
                                     .UpdateTargetId = "resultsMainWindow"}))
                            @<label>
                                <span>Parish:</span>
                                <select name="ddlParish" class="input required" id="ddlParish">
                                    <option selected="selected" value="">Select A Parish</option>
                                    <option value="010">......</option>


                                </select>
                            </label>
                            @Html.Hidden("caller", "agentresults")
                            @<input type="submit" class="submit" value="Search" />
                        End Using
                    </div>

0 个答案:

没有答案