Javascript html5的验证程序（如<；需要输入>；不起作用

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

var EmpViewModel=函数（）{
//将自我作为“此”参照
var self=这个；
//声明将与UI绑定的可观察对象
self.Code=ko.observable（“”）；
self.Name=ko.observable（“”）；
self.DateOfBirth=ko.可观察（“”）；
自身年龄=可观察到的高度（“”）；
self.ContactNumber=ko.可观察（“”）；
self.Email=ko.observable（“”）；
self.Address=ko.observable（“”）；
self.MaritalStatus=ko.可观察（“”）；
self.City=ko.observable（“”）；
自参考=可观测的（“”）；
//存储在可观察对象中输入的数据的对象
var EmpData={
EmpCode:self.Code，
EmpName:self.Name，
出生日期，
年龄：自我，年龄，
联系人号码：self.ContactNumber，
MaritalStatus:self.MaritalStatus，
EmailID:self.Email，
地址：self.Address，
城市：自我，城市，
参考：自我参考
};
//声明用于存储JSON响应的ObservableArray
self.Employees=ko.observearray（[]）；
//执行POST（插入员工）操作的函数
this.save=函数（）{
//Ajax调用以插入雇员
$.ajax({
类型：“POST”，
url:“/Exercise/Save/”，
data:ko.toJSON（this），//将可观察数据转换为JSON
contentType:“应用程序/json”，
成功：功能（数据）{
警报（数据）；
window.close（）；
//打开器。位置。重新加载（true）；
},
错误：函数（）{
警报（“失败”）；
}
});
//到此为止
};
}
应用绑定（新的EmpViewModel（））；

我的表单中存在各种验证程序，但都不起作用。即使没有填写字段，表单仍在提交

---

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

HTML5 CR中定义的表单数据验证只适用于通过HTML提交的表单，例如使用

。它不适用于脚本提交，即使只使用表单的

submit（）

方法，更不用说Ajax POST了

此外，IE在9版之前（包括9版）都不支持HTML5的这一部分

---

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

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

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

您的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
     };

---

如果您在页面中也使用jquery.validate.js文件进行表单验证，那么此时它会隐式添加值为“novalidate”（true）的“novalidate”属性在你的每个表单元素中，没有通过html5验证。

你使用什么浏览器？可能它不支持html5或此功能。无论如何，你仍然可以自己验证字段，有很多插件和技术用于此。但最后你还需要验证服务器端的数据。我已经检查了IE7、Chrome 10还有mozila..IE7不支持这种验证，我不确定Chrome 10是否支持，但这听起来也很旧。当前版本是25。你真的需要确保你有服务器端验证以及任何客户端验证，否则你只会自找麻烦。HTML5验证目前支持得很差。记住r有很多人仍然在使用旧版本的IE，它们不支持HTML5的大部分新功能。

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