Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Noojee Campaign provides the ability to do field level validation which can be used to force an agent to correctly fill in data before proceeding to the next lead.

Validation rules are added to the onValidate method in the screen layouts Javascript. 

The onValidate method is activated when an Agent clicks the 'Finalise' button or if they click the 'Validate' button.

The Validate button can be used by an agent to check that they have completed the data entry before the hangup. It should be remembered that often validation is dependent on the Disposition so agents should be trained to select the disposition before clicking the Validate button.

You should use field level validation if your Agents are making basic data entry mistakes (e.g. not filling in fields, entering names into the phone field etc) or if you require the Agents to fill in a particular field based on an earlier customer response.

The validation is able to check the contents of a field at a number of different points.

  1. when transitioning between panels when using the Wizard via the onPageVerify 
  2. during the onValidate event triggered by the Validation button or the Finalise button.

Noojee Admin ships with the JQuery validation plugin http://docs.jquery.com/Plugins/Validation.

When using the JQuery validation plugin an an error message is displayed adjacent to each field which is in error.

The agent  must fixed each error before leaving the lead or Wizard page depending on where you hook the validation. Errors are removed from the screen as the user corrects each field.

Defining Rules

The first thing to do is define the set of validation rules for you fields. For details on the types of rules available and the details of setting each rule please refer to the JQuery Validation plugin documenation. This section shows you how to add validation to a Screen Layout.

Note: as NJC mangles field names when rendering input elements you can not use the standard JQuery Validation rule maps. Instead you must use the 'add' method to add rules to a field as explained below.

Start by attaching the jQuery Validation engine to the NJC form. This is done during the onConnect event.

jQuery.njDialerPlugin.onConnect=
function ()
{
    // Attached the validation engine to the NJC form.
    jQuery(jQuery.njDialerPlugin.getForm()).validate();
};

Once you have attached the validation engine you then need to define the set of rules that are to be applied. The jQuery Validdation library comes with a large set of stanard validation rules which can be added.

jQuery.njDialerPlugin.onConnect=
function ()
{
    jQuery(jQuery.njDialerPlugin.getForm()).validate();
    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 });
    jQuery.njDialerPlugin.getFields("pin")
        .rules('add', { required : true , digits: true, rangelength: [4,4]});
    jQuery.njDialerPlugin.getFields("first_name")
        .rules('add',  { required : true});
    jQuery.njDialerPlugin.getFields("last_name")
        .rules('add',  { required : true});
    jQuery.njDialerPlugin.getFields("email")
        .rules('add',  { required : true , email: true});
    jQuery.njDialerPlugin.getFields("phone")
        .rules('add',  { required : true , digits: true});
    jQuery.njDialerPlugin.getFields("agreedtopayment")
        .rules('add',  { required : true , digits : true});
};   

onValidate handling

Having defined the rules you must force the validation rules to be applied during the onValidate handling. Adding validation to the onValidate event is the easiest way of doing field validation. If the validation fails you should return false from the onValidate handler which will stop the agent from being able to leave the lead without first correcting the fields.

It should be noted that when using an onValidate validator that you need to handle three types specific case.

  1. Agent makes a sale (books an appointment....) and as such the fields need to be validated.
  2. Agent doesn't make a sale (e.g. Not Interested) in which case you don't want to validate the fields.
  3. The agent is able to make a sale but is not able to collect all the required data immediately. In this case you should have an appropriate callback disposition code such as 'Sale Additional Data Required'. In this case validation won't occur but will when the agent makes the call back, collects the required data and finally marks the lead as a sale.

To validate the fields during the on save handling add the following:

jQuery.njDialerPlugin.onValidate=
function (disposition)
{
    var valid = true;
    
    //validate before saving lead if its a sale.
    if (disposition === 'Sale')
        valid = jQuery(jQuery.njDialerPlugin.getForm()).valid();
        
    return valid;
};

Checkboxes

Checkboxes need some specialised handling.  To validate that a least one checkbox from a set has been selected use the following rule.

jQuery.njDialerPlugin.getFields("agreedtopayment").rules('add',  { required: true, minlength : 1});

Radio buttons

To validate that a specific radio button from a group has been selected you need to define the following custom rule:

  jQuery.validator.addMethod("requiredRadioValue", function(value, element, params)
  {
      var selectedValue = $('input:radio[name=' + element.name + ']:checked').val();
      return (typeof(params) == 'array') ? (params.indexOf(selectedValue) != -1) : selectedValue == params;
  }, "You must select the required option.");

Then add the following rule:

jQuery.njDialerPlugin.getFields("contact_role")
    .rules('add',  { requiredRadioValue: "reception", required : true});

In the above example we require that the radio button from the contract_role field with a value of 'reception' is the selected radio button.

Custom rules

You may also have the need to specify a custom validator. jQuery makes this easy.

Validation rules need to be attached to the Noojee Campaigner dialer form by calling the 'validate' method.

Within the validation method you define a rules which provides a mappiong between each field and its associated set of rules.

$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.

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:

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.

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;
};

 
  • No labels