Мне кажется удобнее как для пользователя, так и для Вас - отправлять форму с помощью ajax, проверять её на php и возвращать без перезагрузки страницы ответ. Ответ отправлять либо - "готово", или же массив содержащий ошибки, а там уже отображать ошибки как угодно. В сплывающем окне, над каждым полем формы, внизу формы или как Вам вздумается.
Добавим простую html форму с ID, который будим использовать в нашем JS файле при отправке формы.
html
<form action="" method="POST" id="checkout-form">
<input type="text" placeholder="Ваше имя" name="name" required>
<input type="email" placeholder="Ваш email" name="email">
<input type="hidden" name="captcha"> <!-- Наше скрытое поле "каптча", если оно заполнено, то скрипт прекратит своё выполнение -->
<button type="submit">Отправить</button>
</form>
functions.php
function payment_form() {
if( isset($_POST) ){
$errors = []; //Для удобства думаю при выводе(echo) скорее всего лучше перевести в json
//проверка данных из формы
//Проверка скрытого поля (невидимая каптча)
if ( isset($_POST['captcha']) && !empty($_POST['captcha']) ) { //<input> name с captcha сменить на другой, например "input-name" и тут соответственно тоже
array_push( $errors, 'captcha', 'false' );
echo $errors;
wp_die();
}
$fields = array(
'post_type' => 'custom_post',
'post_title' => sanitize_text_field( $name ), // убираем теги с заголовка записи
'post_content' => $textarea, // Нужно добавить функции с проверкой разрешенных html тегов и проверять контент
'post_status' => 'pending'
);
$post_id = wp_insert_post($fields);
if( $post_id ) { //Проверяем успешно ли добавлена наша запись
if( count($errors) ){
echo $errors;
wp_die();
} else {
echo 'succes';
}
} else {
array_push( $errors, 'post', 'false' );
echo $errors;
wp_die();
}
}
wp_die();
}
add_action( 'wp_ajax_payment_form', 'payment_form' );
add_action( 'wp_ajax_nopriv_payment_form', 'payment_form' );
Теперь подключим обработчик формы, который расположим в папке с нашей темой->подпапка "js"
function.php 2
function payment_form() {
//js
wp_enqueue_script( 'form', get_template_directory_uri() . '/js/form.js', array(), '1.0.0', true );
wp_localize_script( 'form', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php') ) );
}
add_action( 'wp_enqueue_scripts', 'payment_form' );
Сам js файл, который будит отвечать за отправку данных формы на сервер.
form.js
var checkoutForm = document.getElementById("checkout-form");
checkoutForm && checkoutForm.addEventListener("submit", function(e){ //Проверяем, есть ли наша форма на странице
e.preventDefault();
this.querySelector("button").disabled = true; //отключим кнопку "Отправить" <button type="submit"></button>
var request = new XMLHttpRequest(); //Если нужна поддержка старых IE, тут нужно доработать
request.addEventListener('load', function(response) {
//Тут прийдет либо succes или же массив наших ошибок
console.log(response);
this.querySelector("button").disabled = false; //Включим кнопку отправить
});
request.addEventListener('error', function() { //Произошла ошибка при попытуке отправки
alert("An error has occurred! Refresh the page.");
});
request.open('POST', ajax_object.ajaxurl, true); //то что мы добавили в function.php 2
request.setRequestHeader('accept', 'application/json');
var formData = new FormData(form);
formData.append('action', 'payment_form'); //экшен нашей формы в function.php
request.send(formData);
});