...
| 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.
...
Validating Fields for onClick events on Email Template Links
Because the event handler for sending emails is executed asynchronously and typically before any validation code in JavaScript. Modification of the HTML hfer tag generated by the built in tools needs to be modified to handle field validation.
Modify Email Template Link
Switch to HTML editor in the screen layout, find <a href> tag and modify the onclick argument to onclick="return false;"
See sample below:
Modify from:
| 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 = true; //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; }; <a href="sendEmailTemplate&to=${custom_email}&cc=&from=sender%40test.com&subject=Message+from+Sender&templateId=59" id="my-link" onclick="newUrlPath(this);return false;" showallfields="true">Email to Lead</a> |
to:
| Code Block |
|---|
<a href="sendEmailTemplate&to=${custom_email}&cc=&from=sender%40test.com&subject=Message+from+Sender&templateId=59" id="my-link" onclick="return false;" showallfields="true">Email to Lead</a> |
Add JavaScript for Field Validation
We can now add the relevant JavaScript for field validation that will handle the checks and triggering the event for sending email
| Code Block |
|---|
function validateFields() {
debugger;
varQuantity = $('#lead_qty').val();
if (varQuantity === "65536EMPTY") {
alert("Please select a value from the Quantity dropdown.");
return false;
}
varProduct = $('#lead_product').val();
if (varProduct === "65536EMPTY") {
alert("Please select a value from the Product dropdown.");
return false;
}
return true;
}
$('#my-link').on('click', function(event) {
if (validateFields(event)) {
debugger;
newUrlPath(event.target);
}
else
event.preventDefault();
}); |