Add frontend settings validation #2159

assets/css/scss/admin-views.scss

@@ -594,11 +594,19 @@ $gv-overlay-index: 10000;
 
 	th,
 	td {
-
 		span, input {
 			font-weight: normal !important;
 		}
 
+		input.gv-error {
+			border: 1px solid $color-red;
+		}
+
+		.gv-error-message {
+			margin-top: 4px;
+			color: $color-red;
+		}
+
 		// 2.6 field groups in the Merge Tag dropdowns inside View Settings
 		.gform-dropdown--merge-tags .gform-dropdown__group-text {
 			font-weight: 500 !important;

assets/js/admin-views.js

@@ -190,7 +190,7 @@
 			   // Double-clicking a field/widget label opens settings
 			   .on( 'dblclick', ".gv-fields:not(.gv-nonexistent-form-field)", vcfg.openFieldSettings )
 
-			   .on( 'change', "#gravityview_settings", vcfg.zebraStripeSettings )
+			   .on( 'change', "#gravityview_settings", vcfg.changedSettingsAction )
 
 			   .on( 'click', '.gv-field-details--toggle', function( e ) {
 
@@ -369,6 +369,109 @@
 		   viewConfiguration.altKey = e.altKey;
 	   },
 
+	   /**
+		* Manages all actions required when the settings are updated.
+		*
+		* @since $ver$
+		*
+		* @param {Event} event
+		*/
+	   changedSettingsAction: function (event) {
+		   viewConfiguration.validateField( $( event.target ) );
+		   viewConfiguration.zebraStripeSettings();
+	   },
+
+	   /**
+		* Validates the field when its value changes.
+		*
+		* @since $ver$
+		*
+		* @param {jQuery} $field
+		*/
+	   validateField: function ( $field ) {
+		   var rules = $field.data( 'rules' );
+		   if ( ! rules ) {
+			   return;
+		   }
+
+		   var error = viewConfiguration.validateValue( $field.val(), rules );
+		   $field.toggleClass( 'gv-error', !! error );
+		   $field.parent().find( '.gv-error-message' ).remove();
+		   if ( error ) {
+			   $( '<div>' ).addClass( 'gv-error-message' ).text( error ).insertAfter( $field );
+		   }
+	   },
+
+	   /**
+		* Validates a value against a set of rules.
+		*
+		* @since $ver$
+		*
+		* @param {any} value - The value to validate.
+		* @param {Array} rules - The rules to validate against.
+		* @returns {String|undefined} - Error message. Empty if valid.
+		*/
+	   validateValue( value, rules ) {
+		   if ( ! rules ) {
+			   return;
+		   }
+
+		   var validators = viewConfiguration.getValidators();
+		   for ( var i in rules ) {
+			   if ( ! rules.hasOwnProperty( i ) ) {
+				   continue;
+			   }
+			   var ruleset = rules[ i ],
+				   rule = ruleset.rule,
+				   message = ruleset.message,
+				   param = '',
+				   isValid = true;
+
+			   // Split the rule to get the rule parameter. Example: max:5, rule - max, param - 5.
+			   if ( rule.includes( ':' ) ) {
+				   var parts = rule.split( ':' );
+				   rule = parts[ 0 ];
+				   param = parts[ 1 ];
+			   }
+			   if ( validators[ rule ] ) {
+				   isValid = validators[ rule ]( value, param );
+			   }
+			   if ( ! isValid ) {
+				   return message;
+			   }
+		   }
+	   },
+
+	   /**
+		* Gets a list of validation callbacks.
+		*
+		* @since $ver$
+		*
+		* @returns {Object} - An object containing validation callbacks.
+		*/
+	   getValidators: function () {
+		   return {
+			   required: function ( value ) {
+				   return value !== null && value !== undefined && value.toString().trim() !== '';
+			   },
+			   max: function ( value, max ) {
+				   return value !== null && value !== undefined && Number( value ) <= max;
+			   },
+			   min: function ( value, min ) {
+				   return value !== null && value !== undefined && Number( value ) >= min;
+			   },
+			   email: function ( value ) {
+				   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test( value );
+			   },
+			   integer: function ( value ) {
+				   return Number.isInteger ? Number.isInteger( Number( value ) ) : Number( value ) % 1 === 0;
+			   },
+			   matches: function ( value, pattern ) {
+				   return new RegExp( pattern ).test( value );
+			   },
+		   };
+	   },
+
 	   /**
 		* Update zebra striping when settings are changed
 		* This prevents two gray rows next to each other.

includes/admin/field-types/type_text.php

@@ -1,4 +1,7 @@
 <?php
+
+use GV\Utils;
+
 /**
  * text input type
  */
@@ -43,11 +46,19 @@ function render_input( $override_input = null ) {
 		if ( $show_mt && false !== $this->field['merge_tags'] || 'force' === $this->field['merge_tags'] ) {
 			$class = 'gv-merge-tag-support mt-position-right mt-hide_all_fields ';
 		}
-		$class      .= \GV\Utils::get( $this->field, 'class', 'widefat' );
-		$placeholder = \GV\Utils::get( $this->field, 'placeholder' );
-		?>
-		<input name="<?php echo esc_attr( $this->name ); ?>" placeholder="<?php echo esc_attr( $placeholder ); ?>" id="<?php echo $this->get_field_id(); ?>" type="text" value="<?php echo esc_attr( $this->value ); ?>" class="<?php echo esc_attr( $class ); ?>">
-		<?php
+		$class      .= Utils::get( $this->field, 'class', 'widefat' );
+		$placeholder = Utils::get( $this->field, 'placeholder' );
+		$validation  = Utils::get( $this->field, 'validation' );
+
+		printf(
+			'<input name="%s" placeholder="%s" id="%s" type="text" value="%s" class="%s" data-rules="%s">',
+			esc_attr( $this->name ),
+			esc_attr( $placeholder ),
+			$this->get_field_id(),
+			esc_attr( $this->value ),
+			esc_attr( $class ),
+			esc_attr( json_encode( $validation ) )
+		);
 	}
 }