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

Question

I am working in mvc. I have a view in which a form is post to server using ajax post,knockout,javascript. Name field is required and code field is required in the form. Therefore i used the below code for name in my form:-

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

The below javascript is used by me to post the form

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

There are various validators exists in my form but nothing works. Form is submitting even with no field is filled?

Any ideas to solve this?

Answer 1

Form data validation as defined in HTML5 CR applies only to form submission via HTML, using eg <input type=submit> . It does not apply to scripted submission, even when you just use the submit() method of a form, still less to Ajax POST.

Moreover, support to this part of HTML5 is absent from IE up to and including version 9.

For such reasons, you should perform your form data validation in your own JavaScript code, possibly using a suitable library.

Answer 2

Your form validation isn't doing anything because you aren't actually ever submitting the form. You're simply handling a button press, serializing your viewmodel and using jquery to send a POST request to the server.

We need to see your form submission code to help you, but if you are using jQuery validate you should make a call to .valid()

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

your 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文件进行表单验证，则它会在每个表单元素中隐式添加值为'novalidate'（true）的'novalidate'属性，这会使html5验证失败。