Fixed validation message overlapping text for radio field.

wpmetabox · Dec 1, 2017 · d7a5d35 · d7a5d35
1 parent 852ef80
commit d7a5d35
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/css/style.css b/css/style.css
@@ -26,8 +26,8 @@
 .rwmb-label > label {
 	font-weight: 600;
 }
-.rwmb-label.required > span {
-	color: #c00;
+.rwmb-required {
+	color: #dc3232;
 	font-weight: bold;
 	margin-left: 3px;
 }
@@ -95,15 +95,15 @@
 }
 
 /* jQuery validation */
-label.error {
-	padding-left: 3px;
-	color: red;
-}
-input.error,
-textarea.error,
-select.error {
-	border-color: #c00 !important;
-	background: #ffebe8 !important;
+p.rwmb-error {
+	color: #dc3232;
+	margin: 2px 0 5px;
+}
+input.rwmb-error.rwmb-error,
+textarea.rwmb-error,
+select.rwmb-error {
+	border-color: #dc3232;
+	background: #ffebe8;
 }
 
 /* Utilities

diff --git a/js/validate.js b/js/validate.js
@@ -9,7 +9,12 @@ jQuery( function ( $ ) {
 			$form.siblings( '#message' ).remove();
 			$form.before( '<div id="message" class="error"><p>' + rwmbValidate.summaryMessage + '</p></div>' );
 		},
-		ignore: ':not([class|="rwmb"])'
+		ignore: ':not([class|="rwmb"])',
+		errorPlacement: function(error, element) {
+			error.appendTo( element.closest( '.rwmb-input' ) );
+		},
+		errorClass: 'rwmb-error',
+		errorElement: 'p'
 	};
 
 	// Edit post form.
@@ -33,7 +38,7 @@ jQuery( function ( $ ) {
 		// Required field styling
 		$.each( subRules.rules, function ( k, v ) {
 			if ( v['required'] ) {
-				$( '#' + k ).parent().siblings( '.rwmb-label' ).addClass( 'required' ).append( '<span>*</span>' );
+				$( '#' + k ).parent().siblings( '.rwmb-label' ).append( '<span class="rwmb-required">*</span>' );
 			}
 		} );
 	} );