From d7a5d35d8c8ff5a701a603e7bbe0fb3eac1aba80 Mon Sep 17 00:00:00 2001
From: Anh <anhtnt@elightup.com>
Date: Fri, 1 Dec 2017 10:36:59 +0700
Subject: [PATCH] Fixed validation message overlapping text for radio field.

---
 css/style.css  | 22 +++++++++++-----------
 js/validate.js |  9 +++++++--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/css/style.css b/css/style.css
index 372556492..5ca77d59a 100644
--- 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
index 07e7de31d..ad809213c 100644
--- 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>' );
 			}
 		} );
 	} );