Check for and enforce unique value in user-entered custom meta field in WP Admin

Question

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.

Answer 1

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.