4

这可能是最简单的问题，但我无法解决这个问题。我页面上的验证不起作用。每次我提交将所有输入字段留空的页面时，都会生成一条警报，提示“失败”。如果我输入所有带有一些值数据的字段，则成功提交。

这是我的 HTML：

@{
ViewBag.Title = "Exercise10";
}
<html>
<head>

<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.2.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="../../Scripts/json2.js" type="text/javascript"></script>
<link href="../../Content/ExerciseStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/Popup.js" type="text/javascript"></script>


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-    ui.css" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="../../Scripts/DatePicker.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-validator.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-validator-extensions.js" type="text/javascript"></script>
<link href="../../Scripts/extensions.css" rel="stylesheet" type="text/css" />

</head>
<body>
<form action="" method="post">
<div id="MainArea">
    <table id="tbllist" align="center" style="margin-left: 15px; width: 96%; margin-      right: 15px;">
        <tr>
            <th colspan="3" align="left">
                <div id="title_p">
                    Enter Following Entries</div>
            </th>
        </tr>
        <tr>
            <td align="right" style="width: 40%;">
                <b>Name :</b>
            </td>
            <td align="left" style="width: 17%;">
                <input data-bind="value: EmployeeName" placeholder="Employee Name" class="txt"
                    type="text" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Emp# :</b>
            </td>
            <td align="left">
                <input data-bind="value: EmployeeCode" placeholder="Employee Code" style="width: 200px;"
                    type="text" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Date of Birth :</b>
            </td>
            <td align="left">
                <input data-bind="value: Dob" id="datepicker" placeholder="Date of Birth" style="width: 200px;"
                    type="text" /><span>(dd/mm/yyyy)</span>
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Age (18-60):</b>
            </td>
            <td align="left">
                <input data-bind="value: Age" style="width: 200px;" placeholder="Age Range (18-60)"
                    type="number" min="18" max="60" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Contact Number :</b>
            </td>
            <td align="left">
                <input data-bind="value: ContactNumber" placeholder="Contact Number" style="width: 200px;"
                    type="text" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Email :</b>
            </td>
            <td align="left">
                <input data-bind="value: EmailID" placeholder="Email ID" style="width: 200px;"
                    type="email" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Address :</b>
            </td>
            <td align="left">
                <input data-bind="value: Address" placeholder="Address" style="width: 200px;"
                    type="text" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>City :</b>
            </td>
            <td align="left">
                <select data-bind="value: City" style="width: 200px;">
                    <option value="Noida">New Delhi</option>
                    <option value="Noida">Noida</option>
                    <option value="Noida">Mumbai</option>
                </select>
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Marital Status :</b>
            </td>
            <td align="left">
                <input data-bind="checked: MaritalStatus" checked="checked" name="rdb" type="radio" /><span>UnMarried</span>
                <input data-bind="checked: MaritalStatus" checked="checked" name="rdb" type="radio" checked="checked" /><span>Married</span>

            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td align="right">
                <b>Any Employee Reference :</b>
            </td>
            <td align="left">
                <input data-bind="checked: Is_Reference" type="checkbox" />yes
            </td>
            <td align="left">
            </td>
        </tr>
    </table>
    <table style="width: 99%; margin-right: 20px; padding: 5px;">
            <tr align="right">
                <td>
                    <button data-bind="click :$root.save" class="button">Save</button>
                    <input type="button" id="btnCancel" class="button" value="Cancel" onclick="JavaScript:closePopup();" />
                </td>
            </tr>
        </table>
</div>
</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.EmployeeCode = ko.observable("").extend({ required: true });
        self.EmployeeName = ko.observable("").extend({ required: { message: 'Please supply your Name.'} });
        self.Dob = ko.observable("");
        self.Age = ko.observable("").extend({number :true});
        self.ContactNumber = ko.observable("");
        self.EmailID = ko.observable("");
        self.Address = ko.observable("");
        self.MaritalStatus = ko.observable("");
        self.City = ko.observable("");
        self.Is_Reference = ko.observable("");

        //The Object which stored data entered in the observables
        var EmpData = {
            EmpCode: self.EmployeeCode,
            EmpName: self.EmployeeName,
            Dob: self.Dob,
            Age: self.Age,
            ContactNumber: self.ContactNumber,
            MaritalStatus: self.MaritalStatus,
            EmailID: self.EmailID,
            Address: self.Address,
            City: self.City,
            Is_Reference: self.Is_Reference
        };

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

        //Function to perform POST (insert Employee) operation
        self.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);
                },
                error: function () {
                    alert("Failed");
                }
            });
            //Ends Here
        };
    }

    ko.applyBindings(new EmpViewModel());
</script>

4

1 回答 1

12

Knockout-validation 仅在字段被修改时才显示验证消息。因此，如果所有字段都有效，您应该检查提交，如果不是，则显示所有错误。

 self.errors = ko.validation.group(this, { deep: true, observable: false });

  //Function to perform POST (insert Employee) operation
        self.save = function () {
            // check if valid
            if(self.errors().length > 0) {
                self.errors.showAllMessages();
                return;
            }
            //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);
                },
                error: function () {
                    alert("Failed");
                }
            });
            //Ends Here
 };

我创建了一个小提琴来表明：http: //jsfiddle.net/delixfe/tSzYf/2/

于 2013-01-31T09:16:48.483 回答