Added validation for required fields

seb86 · seb86 · commit 761f7e9a9097 · 2019-05-10T18:35:27.000+02:00
diff --git a/assets/js/admin/settings.js b/assets/js/admin/settings.js
@@ -1,11 +1,13 @@
 /* global alnp_settings_params */
 ( function( $, params ) {
-	var changed       = false,
-		need_help     = $('.need-help').data('tab'),
-		help_tabs     = $('.contextual-help-tabs'),
-		help_contents = $('.contextual-help-tabs-wrap'),
-		panel         = $('#' + $('#screen-meta-links').find('.show-settings').attr('aria-controls') ),
-		rtl           = params.is_rtl;
+	var changed        = false,
+		validated      = true,
+		$settings_form = $( 'form' ),
+		need_help      = $('.need-help').data('tab'),
+		help_tabs      = $('.contextual-help-tabs'),
+		help_contents  = $('.contextual-help-tabs-wrap'),
+		panel          = $('#' + $('#screen-meta-links').find('.show-settings').attr('aria-controls') ),
+		rtl            = params.is_rtl;
 
 	if ( rtl == 'rtl' ) {
 		rtl = true;
@@ -60,9 +62,72 @@
 		}
 	});
 
-	// Clears any warnings previously set
-	$('.submit :input').click( function() {
-		changed = false;
+	// Validate required fields.
+	$settings_form.on('input validate change', 'input, number, email, textarea, select, checkbox, radio', function(e) {
+		var $this          = $( this ),
+			required       = $this.hasClass( 'required' ),
+			validate_email = $this.hasClass( 'validate-email' ),
+			event_type     = e.type;
+
+		if ( 'input' === event_type ) {
+			$this.removeClass( 'validated' );
+		}
+
+		if ( 'validate' === event_type || 'change' === event_type ) {
+
+			if ( required ) {
+				if ( 'checkbox' === $this.attr( 'type' ) && ! $this.is( ':checked' ) ) {
+					$this.removeClass( 'validated' ).addClass( 'invalid invalid-required-field' );
+					validated = false;
+				} else if ( $this.val().length == 0 ) {
+					$this.removeClass( 'validated' ).addClass( 'invalid invalid-required-field' );
+					validated = false;	
+				}
+			}
+
+			if ( validate_email ) {
+				if ( $this.val() ) {
+					var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
+
+					if ( ! pattern.test( $this.val() ) ) {
+						$this.removeClass( 'validated' ).addClass( 'invalid invalid-email' );
+						validated = false;
+					}
+				}
+			}
+
+			if ( validated ) {
+				$this.removeClass( 'invalid invalid-required-field invalid-email' ).addClass( 'validated' );
+			}
+		}
+	});
+
+	// Clears any warnings previously set or warns the user of fields required.
+	$('.submit :input').click( function(e) {
+		if ( ! validated ) {
+			e.preventDefault();
+
+			$.confirm({
+				icon: 'dashicons dashicons-warning',
+				title: params.i18n_warning,
+				content: 'There are required settings that need your attention before saving.',
+				rtl: rtl,
+				type: 'red',
+				buttons: {
+					close: {
+						keys: ['n', 'esc', 'enter'],
+						action: function () {
+						}
+					},
+				},
+				draggable: false,
+				boxWidth: '500px',
+				useBootstrap: false,
+			});
+
+		} else {
+			changed = false;
+		}
 	});
 
 	// Reset button - If pressed will warn the user that all settings will be reset if they continue.
