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

ノックアウト検証は、フィールドが変更された場合にのみ検証メッセージを表示します。したがって、送信時にすべてのフィールドが有効かどうかを確認し、そうでない場合はすべてのエラーを表示する必要があります。

 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 に答える