Highlighting Required Nintex Fields Dynamically

Nintex offers a great platform with which to customize SharePoint forms. Although the capabilities of Nintex are great, not everything can be done out of the box. I needed to highlight Nintex Forms 2013 controls that were required but had not yet been assigned a value. I was able to accomplish this with some custom JavaScript that used the Nintex version of jQuery.

The HTML input types supported by the following JavaScript are text, radio, and checkbox. When a text input is empty, a red bounding box will surround the Nintex input control. The same will happen when a radio choice has no selected option or a checkbox is not checked.

The following JavaScript also includes an override of the jQuery UI datepicker._gotoToday function, such that selecting the "Today" button triggers a date selected event (found on Stack Overflow). Furthermore, the control that the datepicker is attached to also binds an event handler to the datepicker onSelect event that removes the highlighting when a date is selected. This event handler is attached when the control is clicked so that the jQuery UI datepicker will have already been attached at that point. Lastly, there is a timeout on the input mouseup event such that if the "X" at the end of the input is clicked in Internet Explorer 10, that a "cleared" event is triggered (also found on Stack Overflow).

To attach these events to a Nintex control, add the "required" CSS class to it, and include the following CSS in the form's custom CSS. The color chosen here is thanks to DMC's web color cheat sheet.

.required {
}
.required-empty {
 border: 2px solid #CC3333;
}

Here is the JavaScript.

NWF$.datepicker._gotoToday = function(id) {
 var target = NWF$(id);
 var inst = this._getInst(target[0]);
 if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
  inst.selectedDay = inst.currentDay;
  inst.drawMonth = inst.selectedMonth = inst.currentMonth;
  inst.drawYear = inst.selectedYear = inst.currentYear;
 }
 else {
  var date = new Date();
  inst.selectedDay = date.getDate();
  inst.drawMonth = inst.selectedMonth = date.getMonth();
  inst.drawYear = inst.selectedYear = date.getFullYear();
  this._setDateDatepicker(target, date);
  this._selectDate(id, this._getDateDatepicker(target));
 }
 this._notifyChange(inst);
 this._adjustDate(target);
}

function validateChoice(control) {
 if (control.find('input[type="radio"]:checked,input[type="checkbox"]:checked').length > 0) {
  control.removeClass('required-empty');
 } else {
  control.addClass('required-empty');
 }
}

function validateText(control, input) {
 if (!input.val()) {
   control.addClass('required-empty');
  } else {
   control.removeClass('required-empty');
  }
}

NWF$(document).ready(function() {
 NWF$('.required').each(function() {
  var control = NWF$(this);
  if (control.find('input[type="radio"]:not([disabled]),input[type="checkbox"]:not([disabled])').length > 0) {
   validateChoice(control);
   control.click(function() {
    validateChoice(control);
   });
  } else {
   var input = control.find('input');
   if (input.attr('disabled')) return;
   validateText(control, input);
   input.bind('keyup cut paste cleared', function() {
    validateText(control, input);
   });
   input.bind('mouseup', function() {
    oldValue = input.val();
    if (oldValue == '') return;
    setTimeout(function() {
     var newValue = input.val();
     if (newValue == '') {
      input.trigger("cleared");
     }
    }, 1);
   });
   if (input.hasClass('nf-date-picker')) {
    input.click(function() {
     input.datepicker('option', 'onSelect', function() {
      control.removeClass('required-empty');
     });
    });
   }
  }
 });
});

Click to learn more about DMC's Microsoft Consulting Services.