jQuery驗證與MVC不工作

Question

我使用jQuery的vaidation MVC中，它是工作的每一個地方 除了包含像這樣另一種觀點一個觀點：

@{ 
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"); } 

我創建行動回報這其中，驗證這個局部視圖不起作用：

@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> 

這裏是我的電子郵件的索引圖，其中確認工作：

@{ 
    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

嘗試在視圖模型中使用驗證。 Client validation in Asp.net