Field View Rendering

When a field’s view is rendered from a template, the render:view event is triggered on multiple channels.

An example of this in Ninja Forms is the rendering of the textarea field’s Rich Text Editor setting. See: RTE Example

Custom Example

In the below example, we listen on the textbox field type channel for the render:view event, and register a call back to the renderView() function. The callback for render:view receives the view as a parameter, which has access to the view’s model as a property.

The first line of the callback verifies that this is the correct view for our use case by checking the view’s model field key. From there we access the field element from the view.

// Create a new object for custom validation of a custom field.
var myCustomFieldController = Marionette.Object.extend( {
initialize: function() {
// Listen to the render:view event for a field type. Example: Textbox field.
this.listenTo( 'textbox' ), 'render:view', this.renderView );
renderView: function( view ) {
// Check if this is the right field. Example check for field key.
if ( 'example_key' != view.model.get( 'key' ) ) return false;
var el = jQuery( view.el ).find( '.nf-element' );
// Do stuff.
// On Document Ready…
jQuery( document ).ready( function( $ ) {
// Instantiate our custom field's controller, defined above.
new myCustomFieldController();