Client side validation showing strange behavior on Bootstrap modal

问题

I have a page which list all Countries in a tabular form and view has a model like below:

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

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

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

}

On the same page I have a link that allows the user to create a new Country via a modal popup(defined within that page)
Modal Popup section of the page is shown below:

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

The javascript that triggers the modal popup is :

$(".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
    }

The behavior that I am seeing is when both the textboxes are empty and user presses Submit Button it shows Validation message against both, but if I enter value in any ONE of them, and press SUBMIT, it start posting the form, i.e. to Action "ManageCity" and does not check for Client side validation on the other textbox.

I have already included both Validate.js and UnObstrusive.js files on my layout page of this form page

来源：https://stackoverflow.com/questions/27580609/client-side-validation-showing-strange-behavior-on-bootstrap-modal