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