Css 如何更改knockoutJS中验证消息的默认颜色

Css 如何更改knockoutJS中验证消息的默认颜色,css,knockout-validation,Css,Knockout Validation,我已经通过knockoutJS在HTML页面上应用了验证。当我想单击“提交”按钮时,验证工作正常,但消息显示为黑色…我希望它显示为红色。下面是我的查看页面的一小部分: 您可以创建自定义消息模板 <script type="text/html" id="myCustomTemplate"> <span class="yourCustomCssClass" data-bind="if: field.isModified() &

我已经通过knockoutJS在HTML页面上应用了验证。当我想单击“提交”按钮时,验证工作正常,但消息显示为黑色…我希望它显示为红色。下面是我的查看页面的一小部分:


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

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

或者像这里描述的那样:

Thanx delixfe…这很好..bt验证消息是否可能仅显示或在单击提交按钮后显示…这是JSFIDLE中的场景…如果您还记得这把小提琴也是由您制作的…我的解决方案的工作原理类似于敲除验证的标准消息。如果观测值无效且已修改,则显示一条消息。您可以在小提琴中通过输入名称、离开输入字段并再次删除名称来测试这一点。提交时,它将所有字段标记为已更改。->这可能会产生另一个问题,因为这里不支持格式化。。
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());
<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' });