Jquery Validation not validating with knockout js

Question

I have just started learning/using knockout js. for some reasons the jquery validation is not working with it. any ideas what i am missing?? here's my code.. all the respective js files are included in layout.cshtml

<!-- My html --->
<form>
    <h2>Employee Management</h2>

            <table>
            <tr>
                <td>
                    <!--Bind the TextBoxes in the Table to the observable properties defined into the ViewModel -->
                    <table id="tbldml">
                        <tr>
                            <td>EmpNo</td>
                            <td>
                                <input type="text" id="txteno"  data-bind="value: $root.EmpNo" disabled="disabled" /></td>
                        </tr>
                        <tr>
                            <td>EmpName</td>
                            <td>
                                <input type="text" id="txtename" class='required' data-bind="value: $root.EmpName" /></td>
                        </tr>
                        <tr>
                            <td>Salary</td>
                            <td>
                                <input class='required number'  id="txtsal" data-bind="value: $root.Salary, uniqueName: true" /></td>
                        </tr>
                        <tr>
                            <td>DeptName</td>
                            <td>
                                <input type="text" id="txtdname" data-bind="value: $root.DeptName" /></td>
                        </tr>
                        <tr>
                            <td>Designation</td>
                            <td>
                                <input type="text" id="txtdesig" data-bind="value: $root.Designation" /></td>
                        </tr>
                        <tr>
                            <!--The click binding has the JavaScirpt methods passed to it-->
                            <td>
                                <button data-bind="click :$root.save">Save</button></td>
                            <td>
                                <button data-bind="click: $root.update">Update</button></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div class="FixedContainer">
                        <!--If the lenght of the Employees is greater than 0 then visible the Table-->
                        <table  data-bind="visible:  Employees().length>0" style="border: double">
                            <thead>
                                <tr>
                                    <td>EmpNo</td>
                                    <td>EmpName</td>
                                    <td>Salary</td>
                                    <td>DeptName</td>
                                    <td>Designation</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <!--Iterate through an observableArray using foreach-->
                            <tbody data-bind="foreach:  Employees">
                                <tr style="border: solid">                                    
                                    <td><a href="#"  data-bind="click: $root.getselectedemployee" id="updtr"><span data-bind="text:  EmpNo"></span></a></td>
                                    <td><span data-bind="text:  EmpName"></span></td>
                                    <td><span data-bind="text: Salary"></span></td>
                                    <td><span data-bind="text: DeptName"></span></td>
                                    <td><span data-bind="text: Designation"></span></td>
                                    <td><button data-bind="click: $root.deleterec">Delete</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </table>

</form>

<!-- my js file-->

var EmpViewModel = function () {

    //Make the self as 'this' reference
    var self = this;

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

    GetEmployees(); //Call the Function which gets all records using ajax call

    //Declare observable which will be bind with UI 
    self.EmpNo = ko.observable("");
    self.EmpName = ko.observable("");
    self.Salary = ko.observable("");
    self.DeptName = ko.observable("");
    self.Designation = ko.observable("");

    //The JSON Object which stored data entered in the observables
    var EmpData = {
        EmpNo: self.EmpNo,
        EmpName: self.EmpName,
        Salary: self.Salary,
        DeptName: self.DeptName,
        Designation: self.Designation
    };

    //Function to Read All Employees
    function GetEmployees() {
        //Ajax Call Get All Employee Records
        $.ajax({
            type: "GET",
            url: "/api/EmployeeInfoAPI",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Employees(data); //Put the response in ObservableArray
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        //Ends Here
    }

    //Function to perform POST (insert Employee) operation
    self.save = function () {
        //Ajax call to Insert the Employee
        $.ajax({
            type: "POST",
            url: "/api/EmployeeInfoAPI",
            data: ko.toJSON(EmpData), //Convert the Observable Data into JSON
            contentType: "application/json",
            success: function (data) {
                alert("Record Added Successfully");
                self.EmpNo(data.EmpNo);
                alert("The New Employee Id :" + self.EmpNo());
                GetEmployees();
            },
            error: function () {
                alert("Failed");
            }
        });
        //Ends Here
    };

    self.update = function () {
                var url = "/api/EmployeeInfoAPI/" + self.EmpNo();
                alert(url);
                $.ajax({
                    type: "PUT",
                    url: url,
                    data: ko.toJSON(EmpData),
                    contentType: "application/json",
                    success: function (data) {
                        alert("Record Updated Successfully");
                        GetEmployees();
                    },
                    error: function (error) {
                        alert(error.status + "<!----!>" + error.statusText);
                    }
                });
            };

    //Function to perform DELETE Operation
    self.deleterec = function (employee) {
        $.ajax({
            type: "DELETE",
            url: "/api/EmployeeInfoAPI/" + employee.EmpNo,
            success: function (data) {
                alert("Record Deleted Successfully");
                GetEmployees();//Refresh the Table
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        // alert("Clicked" + employee.EmpNo)
    };


    //executed when record is selected from the table
    self.getselectedemployee = function (employee) {
        self.EmpNo(employee.EmpNo),
        self.EmpName(employee.EmpName),
        self.Salary(employee.Salary),
        self.DeptName(employee.DeptName),
        self.Designation(employee.Designation)
    };

};
$(document).ready(function () {
    var empVM = new EmpViewModel();
    //alert(empVM.Employees.length);
    ko.applyBindings(empVM);
});

Answer 1

Some corrections needs to be made in my html and js file to make the validation work.Here they are..

<!-- The click binding to save should not be through ko so removed that-->
<td>
                                <button  type="submit">Save</button>
</td>

And in js file

$(document).ready(function () {
    var empVM = new EmpViewModel();
    //alert(empVM.Employees.length);
    ko.applyBindings(empVM);

    $("form").validate({ submitHandler: empVM.save }); //added this to active jquery validation and bind to save method
});

Answer 2

You need a name attribute on your inputs. KO has a built in one called unqiueName: true