使用MVC的Jquery验证无法正常工作

Question

I am using jquery vaidation in mvc and it is working every where except in one view which contains other view like so :

@{
 Layout = Request.IsAjaxRequest() ? null :"~/Views/Shared/FormsView.cshtml";
}


<div id="indexdiv">

<style>
    .ma {
        padding-left: 5px;
        padding-top: 8px;
    }

    .blueb {
        padding-left: 10px;
        padding-bottom: 10px;
        padding-top: 8px;
    }

    .add {
        margin-bottom: 5px;
        width: 500px;
    }
</style>

<div class="btn-danger ma ci" style="height:50px ;">
    <h2 class="white" style=" float:left; margin-left:5px ; margin-top:2px; margin-bottom:10px;"> ADDRESSES </h2>
    <button id="sh" class="btn btn-primary" style="float:right; margin-right:5px;">
        @Ajax.ActionLink(
            "Create",
            "Create",
            "Addresses",
            new AjaxOptions
            {
                UpdateTargetId = "EditDivId",
                InsertionMode = InsertionMode.Replace

            })
    </button>
</div>



<div id="EditDivId">
</div>

<div class="nicdark_space10"></div>
@{ Html.RenderAction("_i");  }


@{ Html.RenderAction("Index", "Emails"); }
@{ Html.RenderAction("Index", "Phones"); }

my create action returns this partial view which where the validation doesn't work :

 @model CourseSelection.Models.Address


    <style>
        .ma {
        padding-left: 5px;
        padding-top: 8px;
    }

    .blueb {
        padding-left: 10px;
        padding-bottom: 10px;
        padding-top: 8px;
        background-color: green;
    }

    .add {
        margin-bottom: 5px;
        width: 500px;
    }

    .mr {
        margin-right: 20px;
    }

    .link {
        color: brown;
    }

        .link:hover {
            color: brown;
        }
</style>

    @Scripts.Render("~/bundles/jquery")

    @using (Ajax.BeginForm("Create", "Addresses", FormMethod.Post, new AjaxOptions
{
        UpdateTargetId = "indexdiv",
        InsertionMode = InsertionMode.Replace


}, new { @id = "createform22" }))
{
    @Html.AntiForgeryToken()

    <div id="tt">
        <div class="blueb nicdark_bg_blue" style="margin-top:10px;">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="addres">Address</label>
                        <br />
                        <input type="text"  class="form-control add" id="address1" name="address1" maxlength="100" />
                    </div>

                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="type">Type</label>
                        <br />
                        @Html.DropDownList("typeid", null, htmlAttributes: new { @class = "form-control" })
                    </div>

                </div>

            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="city">City</label>

                        <select id="Countries" name="cityid" class="form-control"></select>



                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="county">County</label>

                        <select id="States" name="countyid" class="form-control"></select>

                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="neighborhood">Neighborhood</label>
                        <input type="text" placeholder="neighborhood" class="form-control" id="neighborhood" name="neighborhood" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-1">
                        <label for="s"></label>
                        <br />
                        <input type="submit" value="Create" class="btn btn-primary" id="s1" style="margin-top:6px; width:80px; height:35px;" />
                    </div>
                    <div class="col-md-1">
                        <label for="hi"></label>
                        <input type="reset" value="Cancel" class="btn btn-danger" id="hi5" style="margin-top:6px; margin-left:3px; width:80px; height:35px;" />
                    </div>
                </div>
            </div>

        </div>
    </div>

}


@section scripts {
    <script type="text/javascript">
        $(function () {
            $.getJSON("/Addresses/cities/List", function (data) {
                var items = "<option>Select City</option>";
                $.each(data, function (i, country) {
                    var selected = "";


                    items += "<option value='" + country.Value + "'>" + country.Text + "</option>";
                });
                $("#Countries").html(items);
            });

            $("#Countries").change(function () {

                var x = $("#Countries > option:selected").attr("value");


                $.getJSON("/Addresses/towns/List/" + x, function (data) {
                    var items = "<option>Select Town</option>";
                    $.each(data, function (i, town) {
                        items += "<option value='" + town.Value + "'>" + town.Text + "</option>";
                    });
                    $("#States").html(items);
                });
            });

        });

    </script>
}

<script>


    $("#hi").click(function () {
        $("#tt").hide();
    });


    $("#createform22").validate({
        onkeyup: false,
        onclick: false,
        rules: {

            address1: {
                required: true,
                email: true
            },

        },
        messages: {

            address1: {
                required: "Please enter an email",
                email: "Email Is not valid"
            },

        },
        errorPlacement: function (error, element) {
            swal({ title: "", text: error.text(), imageUrl: "/img/warning.png" });

        }
    });


</script>

here is my email index view where the validation work :

@{
    Layout = Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/empty.cshtml";
}



    <style>
        .ma {
            padding-left: 5px;
            padding-top: 8px;
        }

        .blueb {
            padding-left: 10px;
            padding-bottom: 10px;
            padding-top: 8px;
        }

        .add {
            margin-bottom: 5px;
            width: 500px;
        }
    </style>





    <div class="btn-danger ma ci" style="height:50px ;">
        <h2 class="white" style=" float:left; margin-left:5px ; margin-top:2px; margin-bottom:10px;"> Emails </h2>
        <button id="sh" class="btn btn-primary" style="float:right; margin-right:5px;">
            @Ajax.ActionLink(
                "Create",
                "Create",
                "Emails",
                new AjaxOptions
                {
                    UpdateTargetId = "EditDivId1",
                    InsertionMode = InsertionMode.Replace

                })
        </button>
    </div>



    <div id="EditDivId1">
    </div>

    <div class="nicdark_space10"></div>
    @{ Html.RenderAction("_i");  }



<script>

</script>

Answer 1

Try to use validations into viewmodels. Client validation in Asp.net