...
| Code Block |
|---|
|
$jQuery.njDialerPlugin.onConnect=
function ()
{
// Create a custom regex validator
jQuery.validator.addMethod("regex", function(value, element, param)
{
return value.match(new RegExp("." + param + "$"));
});
// now use it as follows
// First set a message to display when it fails
jQuery.validator.messages.regex = 'The field did not match the required pattern';
// Enable validation on the form
jQuery(jQuery.njDialerPlugin.getForm()).validate();
// Use our custom validator to force the field to only have alpha characters or a space.
jQuery.njDialerPlugin.getFields("due_date")
.rules('add', { required : true, regex : "[a-zA-Z ]+});
};
|
JQuery Wizard Panel validation
Validation the fields on a JQuery Wizard Panel is a little more complex. Instead of validating during the onValidate event you need to validate each panel individually before you allow the user to leave the current panel. The problem is that there is only a single HTML form which is shared across all of the panels. As such we need to ensure that we only validate the data which is visible on the current panel.
Start by defining the validation rules during the onConnect event. This should occur after the wizard has been initialised.
| Code Block |
|---|
|
jQuery.njDialerPlugin.onConnect=
function ()
{
// WARNING
// This initWizard call isn't sufficient and will be replaced in the next
// part of this example.
// WARNING
jQuery.njDialerPlugin.initWizard();
// Attach jquery validation plugin to the wizard
jQuery(jQuery.njDialerPlugin.getForm()).wizard().validate();
// Attach jquery validation to the form
jQuery(jQuery.njDialerPlugin.getForm()).validate();
// Define rules for fields on every panel
jQuery.njDialerPlugin.getFields("due_date")
.rules('add', { required : true, date: true });
jQuery.njDialerPlugin.getFields("name")
.rules('add', { required : true , rangelength: [1,20]});
jQuery.njDialerPlugin.getFields("last_invoice")
.rules('add', { required : true, date: true });
}
|
Now that we have defined the rules for each of the fields we need to trigger the validation of fields as we leave a panel. Of course we only want to validate those fields which are on the current panel.
To do this we need to modify the call to initWizard as follows:
| Code Block |
|---|
|
jQuery.njDialerPlugin.onConnect=
function ()
{
// Hook the wizards 'beforeForward' method which is called when the user
// clicks the wizards 'forward' button to move to the next panel
jQuery.njDialerPlugin.initWizard(
{
beforeForward: function(event, state )
{
// call out method (below) to validate the panel.
return validatePanel();
}
});
// This method is called from above whenever the user attempt to transition
// 'forward' from one panel to the next.
function validatePanel()
{
/** Validate the fields on the current panel. */
var allValid = true;
// Get the fields which are on the current panel
var fields = jQuery(jQuery.njDialerPlugin.getForm()).wizard('state').step.find(':input');
// iterate through the fields check if each is valid
for (var i =0, len = fields.length; i < len; i++)
{
var field = fields[i];
if ($(field).valid() === 0)
allValid = false; // ooops this one is bad
}
return allValid;
}
|
You should also hook the onValidate event to validate the current panel as you will not get a 'beforeForward' event if the Agent forces the lead to be saved. The second problem is that you also need to ensure that the agent has traversed the wizard to the final panel otherwise they can exit the wizard half way though.
| Code Block |
|---|
| jQuery.njDialerPlugin.onValidate=
function (disposition)
{
var valid = | ;
//validate before saving lead
// But we only want to validate Sales (e.g. we don't need to do validation on a No Answer)
if (disposition == "Sale")
{
// Confirm that the user is in th final panel of the wizard
if (jQuery(jQuery.njDialerPlugin.getForm()).wizard('state').step.name != "ReviewDetails")
{
valid = false;
alert("You must be on the Review Details panel in order to save the lead.");
}
else
// Valdiate the final panel
valid = validatePanel();
}
return valid;
};
|
|