4

我已经通过 knockoutJS 在 HTML 页面上应用了验证..当我想单击提交按钮时，验证效果很好，但消息显示为黑色......我希望它显示为红色..这是我的一小部分查看页面：

         <tr>
            <td align="right" style="width: 30%;">
                <b>Name :</b>
            </td>
            <td align="left" style="width: 70%;">
                <input data-bind="value: EmployeeName" placeholder="Employee Name" class="txt"
                    type="text" />
            </td>
        </tr>

和我的视图模型（续上）：

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: { message: 'Please enter your Employee Code.'} }); //WANT TO CHANGE THIS MESSAGE TEXT COLOR TO RED..
        self.EmployeeName = ko.observable("").extend({ required: { message: 'Please enter your Name.'} });
        self.Dob = ko.observable("").extend({ required: { message: 'Please enter your Date of Birth.'} });
        self.Age = ko.observable("").extend({ number: true, required: { message: 'Please enter your Age.'} });
        self.ContactNumber = ko.observable("").extend({ number: true, required: { message: 'Please enter your Contact Number.'} });
        self.EmailID = ko.observable("").extend({ email: true, required: { message: 'Please enter your EmailID.'} });
        self.Address = ko.observable("").extend({ required: { message: 'Please enter your Address.'} });
        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
        };


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

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

        //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);
                    window.close();
                    opener.location.reload(true);
                },
                error: function () {
                    alert("Failed");
                }
            });
            //Ends Here
        };
    }

    ko.applyBindings(new EmpViewModel());
4

1 回答 1

2

您可以创建自定义消息模板。

<script type="text/html" id="myCustomTemplate">
    <span 
         class="yourCustomCssClass" 
         data-bind="if: field.isModified() && !field.isValid(), 
                    text: field.error"></span>
</script>

并配置敲除验证来使用它：

ko.validation.init({ messageTemplate: 'myCustomTemplate' });

或者像这里描述的那样：https ://github.com/ericmbarnard/Knockout-Validation/wiki/Configuration

于 2013-02-01T06:39:23.793 回答