Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added support for required field validation. Specifying 'required' =>…

… 1 in meta box args
  • Loading branch information...
commit 79bd4c87405045ca94eae63f191bfcbb43215d97 1 parent 017ea14
@anderly anderly authored
Showing with 128 additions and 0 deletions.
  1. +11 −0 css/style.css
  2. +6 −0 inc/classes/meta-box.php
  3. +111 −0 js/common.js
View
11 css/style.css
@@ -4,6 +4,12 @@
.rwmb-field {
margin: 10px 0;
}
+ .rwmb-text.error {
+ margin: 0px !important;
+ padding: 0px;
+ border: #CC0000 solid 1px !important;
+ background-color: #FFEBE8;
+ }
.rwmb-label,
.rwmb-input {
display: inline-block;
@@ -12,6 +18,11 @@
.rwmb-label {
width: 24%;
}
+ .rwmb-label > .required
+ {
+ color: red;
+ font-weight:bold;
+ }
/* 75% if field has label, 100% if no label */
.rwmb-input {
width: 100%;
View
6 inc/classes/meta-box.php
@@ -108,6 +108,9 @@ 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 )
wp_enqueue_script( 'rwmb-clone', RWMB_JS_URL . 'clone.js', array( 'jquery' ), RWMB_VER, true );
}
@@ -234,6 +237,9 @@ public function show()
// Display label and input in DIV and allow user-defined classes to be appended
$class = 'rwmb-field';
+ if ( $field['required'] ) {
+ $class .= ' required';
+ }
if ( isset( $field['class'] ) )
$class = $this->add_cssclass( $field['class'], $class );
View
111 js/common.js
@@ -0,0 +1,111 @@
+var rwmb = {
+ isValid : true,
+ validation_message : "Validation Failed. One or more fields below are required.", // TODO: add localization support
+};
+
+(function($){
+
+
+ /*
+ * Document Ready
+ * @description: adds required field styling elements
+ */
+ $(document).ready(function(){
+
+ $('.rwmb-field.required').each(function(){
+ $(this).find('.rwmb-label label').css('font-weight','bold');
+ $(this).find('.rwmb-label').append('<span class="required">*</span>')
+ });
+
+ });
+
+ /*
+ * Submit form
+ * @description: performs required field validation
+ */
+ $('form#post').on("submit", function(){
+
+ // do validation
+ do_validation();
+
+ if( rwmb.isValid == false)
+ {
+ // reset validation for next time
+ rwmb.isValid = true;
+
+ // show message
+ $(this).siblings('#message').remove();
+ $(this).before('<div id="message" class="error"><p>' + rwmb.validation_message + '</p></div>');
+
+
+ // hide ajax stuff on submit button
+ $('#publish').removeClass('button-primary-disabled');
+ $('#ajax-loading').attr('style','');
+ return false;
+ }
+
+ $('.rwmb_postbox:hidden').remove();
+
+ // submit the form
+ return true;
+
+ });
+
+ function do_validation(){
+
+ var isValid = true;
+
+ $('.rwmb-field.required').each(function(){
+
+ // text / textarea
+ if($(this).find('input[type="text"], input[type="hidden"], textarea').val() == "")
+ {
+ isValid = false;
+ }
+
+ // select
+ if(isValid && $(this).find('select').exists())
+ {
+ if($(this).find('select').val() == "null" || !$(this).find('select').val())
+ {
+ isValid = false;
+ }
+ }
+
+ // checkbox
+ if(isValid && $(this).find('input[type="checkbox"]:checked').exists())
+ {
+ isValid = true;
+ }
+
+ // set validation
+ if(!isValid)
+ {
+ $(this).closest('.rwmb-field').addClass('error');
+ }
+
+ });
+
+ rwmb.isValid = isValid;
+
+ }
+
+ /*
+ * Remove error class on focus
+ */
+ // inputs / textareas
+ $('.rwmb-field input, .rwmb-field.required textarea, .rwmb-field.required select').on('focus', function(){
+ $(this).closest('.rwmb-field').removeClass('error');
+ });
+
+ // checkbox
+ $('.rwmb-field.required input:checkbox').on('click', function(){
+ $(this).closest('.rwmb-field').removeClass('error');
+ });
+
+ // wysiwyg
+ $('.rwmb-field.required .acf_wysiwyg').on('mousedown', function(){
+ $(this).closest('.rwmb-field').removeClass('error');
+ });
+
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.