Question

我有一个页面，以表格形式列出所有国家/地区，并且视图的模型如下：

public class CitySet
{
    public IEnumerable<CityObject> Cities { get; set; }

    [Required]
    public string City { get; set; }

    [Required]
    public string CityCode { get; set; }

}

在同一页面上，我有一个链接，允许用户通过模态弹出窗口（在该页面中定义）创建新的国家/地区
页面的模态弹出部分如下所示：

@model CMS.Models.CitySet

<div class="box-header well" data-original-title="">
            <h2>
              <a operation="add" id="btnNewCity" data-toggle="modal" data-target="#myModal" href="#">Add New City</a>
            </h2>

        </div>
        <div class="box-content">  

@*Below table is to show all the added Cities in the tabular format on the page itself*@

            <table id="myDataTable" class="table table-striped table-bordered ">
                <thead>
                    <tr>
                        <th>City</th>
                        <th>Country </th>
                        <th>Creation Date</th>

                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Cities)
                    {
                        <tr id="@item.CityID">
                            <td>@item.City</td>
                            <td>@item.CountryName</td>
                            <td>@item.CreatedDate</td>
                            <td>
                                <a href="" class="model_edit" operation="edit">Edit</a>
                                <a href="" class="model_edit" operation="delete">Delete</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@using (Html.BeginForm("ManageCity", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Add City</h4>
            </div>

<div class="modal-body">
 <div class="form-group">
                     <label for="City"> City </label>
                     @Html.TextBoxFor(model => model.City)
                     @Html.ValidationMessageFor(model=>model.City)
  </div>
  <div class="form-group">
                     <label for="CityCode"> City Code </label>
                     @Html.TextBoxFor(model => model.CityCode)
                     @Html.ValidationMessageFor(model=>model.CityCode)                
   </div>
 <button type="submit" id="addNewCity" class="btn btn-primary">Save changes</button>
}
</div>
</div>
</div>

触发模态弹出窗口的javascript是：

$(".model_edit").click(open_model_form);

function open_model_form(e) {       
        e.preventDefault();                    
        if ($(e.currentTarget).attr("operation") == "add") {
            //open popup
            $('#myModal').modal('show'); 
   }        
}

[HttpPost, ValidateInput(true)]
    public ActionResult ManageCity(FormCollection formData)
    {
       //Some data saving Operation
    }

我看到的行为是当两个文本框都为空并且用户按下提交按钮时它会显示两者的验证消息，但是如果我在其中任何一个中输入值，并按下SUBMIT，它会开始发布表单，即操作“ManageCity”并且不检查另一个文本框上的客户端验证。

我已经在此表单页面的布局页面上包含了Validate.js和UnObstrusive.js文件

客户端验证显示Bootstrap模式上的奇怪行为

0 个答案: