Question

我在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>

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

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

Answer 1

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

此外，IE中不包括对HTML5这部分的支持，包括版本9。

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

Answer 2

您的表单验证没有做任何事情，因为您实际上并未提交表单。您只是按下按钮，序列化您的viewmodel并使用jquery向服务器发送POST请求。

我们需要查看您的表单提交代码以帮助您，但如果您使用jQuery验证，则应调用.valid（）

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

你的viewmodel

    //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
     };

Answer 3

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

html5的验证器（例如<input required =“”/>不起作用

3 个答案: