html5的验证器(例如<input required>不起作用

validators of html5 (e.g. <input required> is not working

本文关键字：input required 不起作用 例如 html5 验证      更新时间：2023-09-26

我在mvc工作。我有一个视图，其中一个表单是post到服务器使用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>

在我的表单中存在各种验证器，但没有一个有效。即使没有填写任何字段，表单仍在提交?

有解决这个问题的办法吗?

您的表单验证没有做任何事情，因为您实际上从未提交过表单。您只需处理一个按钮按下，序列化您的视图模型，并使用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
     };

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

而且，直到ie9版本都不支持HTML5的这一部分。

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

如果你还使用jquery.validate.js文件在你的页面的表单验证，时间它隐式添加'novalidate'属性值'novalidate'(true)在你的每一个表单元素，你的html5验证失败

相关文章：