Removed common.js and added enhanced validation support using jquery.…

…validate. Updated demo to include validation examples.

css/style.css

@@ -1,15 +1,21 @@
 /* =Styles for 'normal' meta boxes
 -------------------------------------------------------------- */
 
+/* BEGIN jquery.validate styles */
+label.error {
+	padding-left: 3px;
+	color: red;
+}
+
+input.error, textarea.error, select.error {
+	border: #CC0000 solid 1px !important;
+	background-color: #FFEBE8;
+}
+/* END jquery.validate styles */
+
 .rwmb-field {
 	margin: 10px 0;
 }
-	.rwmb-field.error {
-		margin: 10px 0px !important;
-		padding: 0px;
-		border: #CC0000 solid 1px !important;
-		background-color: #FFEBE8;
-	}
 .rwmb-label, 
 .rwmb-input {
 	display: inline-block;

demo/demo.php

@@ -128,6 +128,39 @@
 			'id'		=> "{$prefix}pass",
 			'type'		=> 'password'
 		),
+		// CONFIRM PASSWORD
+		array(
+			'name'		=> 'Confirm your password',
+			'id'		=> "{$prefix}pass_confirm",
+			'type'		=> 'password'
+		),
+	),
+	'validation' => array(
+		'rules' => array(
+			$prefix . 'fname' => array(
+				'required' => true
+			),
+			"{$prefix}pass" => array(
+				'required' => true,
+				'minlength' => 7,
+			),
+			"{$prefix}pass_confirm" => array(
+				'equalTo' => "{$prefix}pass"
+			)
+		),
+		// optional override of default jquery.validate messages
+		'messages' => array(
+			$prefix . 'fname' => array(
+				'required' => 'Your name is required'
+			),
+			"{$prefix}pass" => array(
+				'required' => 'Password is required',
+				'minlength' => 'Password must be at least 7 characters'
+			),
+			"{$prefix}pass_confirm" => array(
+				'equalTo' => 'Please enter the same password'
+			)
+		)
 	)
 );
 

inc/classes/meta-box.php

@@ -35,6 +35,11 @@ class RW_Meta_Box
 		 * Contains all field types of current meta box
 		 */
 		var $types;
+
+		/**
+		 * Validation information
+		 */
+		var $validation;
 
 		/**
 		 * Create meta box based on given data
@@ -52,8 +57,9 @@ function __construct( $meta_box )
 				return;
 
 			// Assign meta box values to local variables and add it's missed values
-			$this->meta_box = self::normalize( $meta_box );
-			$this->fields   = &$this->meta_box['fields'];
+			$this->meta_box 	= self::normalize( $meta_box );
+			$this->fields   	= &$this->meta_box['fields'];
+			$this->validation   = &$this->meta_box['validation'];
 
 			// List of meta box field types
 			$this->types = array_unique( wp_list_pluck( $this->fields, 'type' ) );
@@ -108,11 +114,14 @@ function admin_enqueue_scripts()
 					call_user_func( array( $class, 'admin_enqueue_scripts' ) );
 			}
 
-			// Load common form functions
-			wp_enqueue_script( 'rwmb-common', RWMB_JS_URL . 'common.js', array( 'jquery' ), RWMB_VER, true );
-
-			if ( $has_clone )
+			if ( $has_clone ) {
 				wp_enqueue_script( 'rwmb-clone', RWMB_JS_URL . 'clone.js', array( 'jquery' ), RWMB_VER, true );
+			}
+
+			if ( $this->validation ) {
+				wp_enqueue_script( 'jquery-validate', RWMB_JS_URL . 'jquery.validate.min.js', array( 'jquery' ), RWMB_VER, true );
+				wp_enqueue_script( 'rwmb-validate', RWMB_JS_URL . 'validate.js', array( 'jquery-validate' ), RWMB_VER, true );
+			}
 		}
 
 		/**************************************************
@@ -248,6 +257,26 @@ public function show()
 					$class = $this->add_cssclass( 'hidden', $class );
 				echo "<div class='{$class}'>{$html}</div>";
 			}
+
+			// include validation settings for this meta-box
+			if ( $this->validation ) {
+				echo '<script type="text/javascript">';
+				echo 'if ( typeof rwmb == \'undefined\' ) {
+						var rwmb = {
+							validationOptions : jQuery.parseJSON(\'' . json_encode( $this->validation ) . '\'),
+							summaryMessage : \'' . __('Please correct the errors highlighted below and try again.')  . '\'
+						}
+					} else {
+						var tempOptions = jQuery.parseJSON(\'' . json_encode( $this->validation ) . '\');
+						jQuery.each(tempOptions.rules, function(k, v) {
+							rwmb.validationOptions.rules[k] = v;
+						});
+						jQuery.each(tempOptions.messages, function(k, v) {
+							rwmb.validationOptions.messages[k] = v;
+						});
+					};';
+				echo '</script>';
+			}
 
 			// Allow users to add custom code after meta box content
 			// 1st action applies to all meta boxes
@@ -268,6 +297,7 @@ public function show()
 		static function begin_html( $html, $meta, $field )
 		{
 			$class = 'rwmb-label';
+
 			if ( !empty( $field['class'] ) )
 				$class = self::add_cssclass( $field['class'], $class );
 
@@ -623,4 +653,4 @@ static function is_cloneable( $field )
 			return $field['clone'];
 		}
 	}
-}
+}