6

I am trying to figure out how, on a new or edit post screen, to allow the user to enter a custom meta-item, BUT force it to be unique. Ideally, the process would work like so:

  1. Contributor logs into WP Admin and chooses New Post
  2. In the custom fields area, they choose the key (something like "group-title") and then enter their value
  3. some ajaxy thing verifies whether this value exists in the DB, and warns them to pick another value if it does
  4. The post will not save or update unless the value is unique

In my search of previous items, I found this post but it doesn't seem to help with the ajaxy checking nor prevent submit in admin.

bumped to the homepage by Community 2 days ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

  • I don't remember WP core doing much with JS-based validation, but it's not my area. You might want to research JS validation approach first (which is more generic), then focus question on integrating it with WP editor. – Rarst Apr 27 '14 at 17:08
  • Hi Stephen, I'd suggest to generate the unique value after the process, maybe by adding a hash after the value. Something like original-meta-value become original-meta-value-nglkf342 – ifdion Jan 18 '15 at 0:50
0

I'm not 100% clear on what your question is, but hopefully this will cover it:

There's a lot of documentation of how to use AJAX in WP. I would start here: https://codex.wordpress.org/AJAX

In the function that you write to hook your AJAX call into, make a call to the DB to see if the user-entered value already exists (be careful of SQL-injection attacks here: https://www.getastra.com/blog/cms/wordpress-security/wordpress-sql-injection-attack-protection/). I don't know of a pre-canned way to do this, but it's pretty easy to roll your own query. Return the results of the check (probably in JSON format) to the calling JS code.

You can prevent the post from saving by adding an event handler to the form's submit event and calling preventDefault() on the event object (in a custom JS file that you load for the post edit page):

jQuery('form#post').submit(function(evt) {
    if (myCondition === false) {
        evt.preventDefault();
    }
});

myCondition would be a variable that you define to store the result from your check on the uniqueness of the user-entered value. Using closures, you can make this valuable available to the handler function.

You might run into some trickiness with regard to timing. If you do your AJAX call on the blur event of the input field where the user enters the value, they might then hit the update button before your AJAX call has had a chance to return yet. To ensure that the value has been verified before allowing the user to save, you could try a couple of things (pick whichever seems to work better for you):

  1. Disable the update button until the value has been verified.
  2. Default that myCondition variable (or your equivalent of it) to false. Track if the user has tried to update the post, but hold off on allowing it to go through until your AJAX call has returned. If the call comes back and the value is unique, you can submit the form via JS. Depending on the way your UI is designed, this may or may not be confusing to the user. Best practice would be to let them know what's happening, possibly with a little "Waiting..." pop-up or what-have-you.

I have glazed over a few things, because I'm not sure how much of this stuff you already know. Let me know if you need more details on anything and I'll try to provide them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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