6

I am working on a custom post type, I have removed all the standard wordpress form items and started from scratch with custom meta boxes, except the title field.

In my situation, it is really important that some of the custom meta dropdown selections be selected.

Is there an easy solution to make it where they must select some items before they can post the item?

I assume javascript would be the easiaest solution but it would be nice to let the user know what is going on, like highlight the box if they try to post and it isn't selected yet, another issue is with a drop down menu, there is by default a value selected already even if they did not pick one

1 Answer 1

3

You can use jQuery as it already loaded on posts. The idea is to stop the form submit action.

I have two html elements in my meta:

<select name="cars" class="required">
  <option value="-1">Choose a car</option>
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="bmw">bmw</option>
</select>

<input type="text" class="required" placeholder="Type year">

The form has an id of "post". So with jquery we can write:

jQuery(function($){ //make sure DOM is loaded and pass $ for use
    $('#post').submit(function(e){ // the form submit function
         $('.required').each(function(){
           if( $(this).val() == '-1' || $(this).val() == '' ){ // checks if empty or has a predefined string
             //insert error handling here. eg $(this).addClass('error');
             e.preventDefault(); //stop submit event
           }
         })
    });
});

I think that should do it. To add javascript on a post page use admin_init hook and wp_enque_script. search for them in the codex and you will find out how to use them. if not post a new question.

5
  • 1
    +1 for good suggestion, though i'd use jquery.validate plugin for this, you'll need much less custom code.
    – ptriek
    Commented Dec 11, 2011 at 22:57
  • Haven't tested but it looks like it should work, thanks a lot that is a great idea
    – JasonDavis
    Commented Dec 11, 2011 at 22:58
  • 1
    ptriek: But for a simple validation like this thats overkill. But not a bad idea
    – ferenyl
    Commented Dec 11, 2011 at 22:59
  • 1
    There is a bug in your code, return false is for each function, not for submit event. You need to use $('#post').submit(function( e ){ and then instead of return false use this e.preventDefault();. Commented Feb 27, 2015 at 11:42
  • 1
    missing parentheses on $(this).val() in if statement (twice) Commented Aug 24, 2021 at 0:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.