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.onVerify=
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 ]+});
};

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:

<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:

<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

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();

});