0

我在mvc中工作。我有一个视图，其中使用 ajax post、knockout、javascript 将表单发布到服务器。表单中的名称字段是必需的，代码字段是必需的。因此，我在表格中使用了以下代码作为名称：-

     <input type="text"  data-bind="value:Name" placeholder = "Enter Name" required  /><br />

我使用以下javascript发布表格

      <script type="text/javascript">

     var EmpViewModel = function () {

         //Make the self as 'this' reference
         var self = this;
         //Declare observable which will be bind with UI 
         self.Code = ko.observable("");
         self.Name = ko.observable("");
         self.DateOfBirth = ko.observable("");
         self.Age = ko.observable("");
         self.ContactNumber = ko.observable("");
         self.Email = ko.observable("");
         self.Address = ko.observable("") ;
         self.MaritalStatus = ko.observable("");
         self.City = ko.observable("");
         self.Reference = ko.observable("");

         //The Object which stored data entered in the observables
         var EmpData = {
             EmpCode: self.Code,
             EmpName: self.Name,
             Dob: self.DateOfBirth,
             Age: self.Age,
             ContactNumber: self.ContactNumber,
             MaritalStatus: self.MaritalStatus,
             EmailID: self.Email,
             Address: self.Address,
             City: self.City,
             Reference: self.Reference
         };


         //Declare an ObservableArray for Storing the JSON Response
         self.Employees = ko.observableArray([]);

         //Function to perform POST (insert Employee) operation
         this.save = function () {


             //Ajax call to Insert the Employee
             $.ajax({
                 type: "POST",
                 url: "/Exercise/Save/",
                 data: ko.toJSON(this), //Convert the Observable Data into JSON
                 contentType: "application/json",
                 success: function (data) {
                     alert(data);
                     window.close();
                     //                        opener.location.reload(true);
                 },
                 error: function () {
                     alert("Failed");
                 }
             });
             //Ends Here
         };
     }

     ko.applyBindings(new EmpViewModel());
</script>

我的表单中存在各种验证器，但没有任何作用。即使没有填写任何字段也正在提交表单？

有什么想法可以解决这个问题吗？

4

3 回答 3

0

HTML5 CR 中定义的表单数据验证仅适用于通过 HTML 提交的表单，例如使用<input type=submit>. 它不适用于脚本提交，即使您只是使用submit()表单的方法，更不用说 Ajax POST。

此外，IE 不支持 HTML5 的这一部分，直到版本 9。

由于这些原因，您应该在自己的 JavaScript 代码中执行表单数据验证，可能使用合适的库。

于 2013-03-14T13:27:46.977 回答
0

您的表单验证没有做任何事情，因为您实际上并没有提交表单。您只需处理按钮按下、序列化视图模型并使用 jquery 向服务器发送 POST 请求。

我们需要查看您的表单提交代码来帮助您，但如果您使用 jQuery 验证，您应该调用 .valid()

    //somewhere in the document
    $(function() {
        //use jQuery validates default rules and validate on form submit
        $("#MyForm").validate();
    })

你的视图模型

    //changed to self from this for consistency
    self.save = function () {
        //what you SHOULD be doing is validating against your model. BUT, in the interest of time...
        var isValid = $("#MyForm").valid();
        if(isValid !== true) {
            alert("Not Valid!"); //please don't use an alert in a real app!
            return;
        }
         //Ajax call to Insert the Employee
         $.ajax({
             type: "POST",
             url: "/Exercise/Save/", //change this to self again, for consistency AND so you aren't relying on whatever is firing the save function to set this properly
             data: ko.toJSON(self), //Convert the Observable Data into JSON
             contentType: "application/json",
             success: function (data) {
                 alert(data);
                 window.close();
                 //                        opener.location.reload(true);
             },
             error: function () {
                 alert("Failed");
             }
         });
         //Ends Here
     };
于 2013-03-14T22:48:32.090 回答
0

如果您还使用页面中的 jquery.validate.js 文件进行表单验证，那么它会在您的每个表单元素中隐含地添加值为 'novalidate'(true) 的 'novalidate' 属性，这会导致您的 html5 验证失败。

于 2013-04-06T11:09:35.830 回答