- Dynamic validation.
- Defining a custom validation rule.
- AJAX validation rule
- Defining a custom Marker, to modify how the error messages are displayed on fields.
- Reading the form values from the model, rather than from the input elements.
Dynamic validation.
/* dataentry schema */
schema: {
propertyOne: {
//This validation is dynamic
validation: function () {
//the function is called in the context of the scope (Angular); or model (Knockout); or form element (basic plugin usage)
var rules = [];
if (someCondition)
return ["required"];
//otherwise:
return ["none"];
}
},
propertyTwo: {
//This validation is static
validation: ["required"]
}
}
Defining a custom validation rule.
//custom rule definition: add a property to the $.Forms.Validation.Rules object
$.Forms.Validation.Rules.myCustomRule = {
fn: function (field, value, forced) {
if (!value) return true;//return true if the value is empty, because this validation rule is not checking if a required field is filled.
//return true if the value is composed by 3 digits, followed by an hyphen and then 2 letters
if (/\d{3}-[a-zA-Z]{2}/.test(value))
//value is valid
return true;
//value is not valid
return $.Forms.Validation.GetError(I.t("errors.invalidValue"), arguments);
}
};
//somewhere else in the js code [...]
schema: {
property: {
validation: ["required"]
}
}
Defining an AJAX validation rule.
//custom rule definition: add a property to the $.Forms.Validation.Rules object
$.Forms.Validation.Rules.myAjaxRule = {
deferred: true, //validation rule is deferred
fn: function (field, value, forced) {
var d = new $.Deferred();
$.ajax({
url: "Validation/MyValidationMethod",
type: "POST",
data: {
value: value
},
//to keep reference
context: this
}).done(function (data) {
//support the response to be a boolean
if (data === true)
return d.resolveWith(field, [{ field: field }]);
if (data === false)
data = { error: true };
data.field = field;
if (data.error) {
//define here the error message that you want to use
data.message = I.t("errors.invalidValue");
d.rejectWith(field, [data]);
} else {
d.resolveWith(field, [data]);
}
}).fail(function () {
//SERVER SIDE ERROR DURING VALIDATION: display an error message to let the user know that the validation failed because of a system error
//NB: the client side form could be right; but we cannot be sure of this, therefore we invalidate the field
d.reject({ error: true, message: I.t('errors.validationFailed') });
});
//return a promise object
return d.promise();
};
}
//somewhere else in the js code [...]
schema: {
property: {
validation: ["myAjaxRule"]
}
}
Defining a custom Marker, to modify how the error messages are displayed on fields.
var MyCustomMarker = $.Forms.Marking.MyCustomMarker = function () {};
//implement the following functions: the first argument is always a jQuery element: the field to mark
_.extend(MyCustomMarker.prototype, {
markFieldNeutrum: function (f) {
},
markFieldValid: function (f) {
},
markFieldInvalid: function (f, options) {
//options.message is the error message
}
});
//set as marker type for the validator
$.Forms.Validation.Validator.prototype.markerType = MyCustomMarker;
Reading the form values from the model, rather than from the input elements.
//1. Set the default harvester type to be ContextHarvester (once)
$.Forms.DataEntry.prototype.harvesterType = $.Forms.Harvesting.ContextHarvester;
//2. In each object where a schema is defined, define a method called "dataentryObjectGetter" that returns the object from which values should be read
dataentryObjectGetter: function () {
return this.personEdit;
}