Question

我想在我制作的一些自定义帖子类型中进行预验证，我决定用ajax做这个，所以我写了这段代码： Enqeue剧本：

function hazeracareer_admin_scripts(){
    global $post_type;    

    if ( $post_type == 'job' ) {
        $theme_uri = get_stylesheet_directory_uri();
        wp_register_script('pre-job-submit-validation', $theme_uri . '/admin/js/pre-job-submit-validation.js', array('jquery'), '2133672');
        wp_localize_script('pre-job-submit-validation', 'secure', array('nonce' => wp_create_nonce('hazeracareer_pre_job_submit_validation')));
        wp_enqueue_script('pre-job-submit-validation');
    }

}
add_action('admin_enqueue_scripts', 'hazeracareer_admin_scripts');

JS文件：

jQuery(document).ready(function ($) {
    $('#post').submit(function () {

        var form_data = $('#post').serialize();
        var nonce = secure.nonce;
        var data = {
            action: 'hazeracareer_pre_job_submit_validation',
            security: nonce,
            form_data: form_data
        };
        $.post(ajaxurl, data, function (response) {
            if ( response == 0 ) {
                alert('The Job Number You entered is already exists in another job!');
                return false;
            } else {
                return true;
            }
        });
    });
});

处理ajax请求并进行验证：

function hazeracareer_pre_job_submit_validation(){

    check_ajax_referer('hazeracareer_pre_job_submit_validation', 'security');

    $post = array();
    parse_str($_POST['form_data'], $post);

    if ( !isset($post['fields']['field_job_number']) )
        return;

    $jobs = get_posts(array(
        'post_type' => 'job',
        'post_status' => array('publish', 'draft'),
        'posts_per_page' => -1,
        'meta_key' => 'job_number',
        'meta_value' =>$post['fields']['field_job_number']
    ));

    if ( empty($jobs) ) {
        echo 1;
    }

    echo 0;



    wp_die();

}
add_action('wp_ajax_hazeracareer_pre_job_submit_validation', 'hazeracareer_pre_job_submit_validation');

但即使我收到错误警告“您输入的作业号已经存在于另一个作业中！”，在我按OK后表单确实提交，我收到确认帖子已更新的管理员通知。警报后我返回false，因此不应提交表单。我在网上搜索，似乎没有任何效果。我在这里缺少什么？

提前致谢

Answer 1

您的问题在于您从嵌套函数中返回false。看看你的代码，

jQuery(document).ready(function ($) {
    $('#post').submit(function () {

        //...
        //you need to return from within this function

        $.post(ajaxurl, data, function (response) {

            //...
            //you are instead returning from this function, which will not stop the form submission

        });
    });
});

我解决这个问题的方法是使用某种持久变量来知道你的验证是否通过。例如，

jQuery(document).ready(function($) {

    //protect scope
    $(function() {

        //track the validation
        var valid = false;

        //form submit
        $('#post').on('submit', function(evt) {

            if( valid === true )
                return true;    //now the form will submit!

            //not valid yet! Perform validation
            $.post(ajaxurl, data, function(response) {

                //was the response valid?
                if( response_is_valid ) {

                    valid = true;
                    $('#post').trigger('submit');   //trigger the submit event, which will submit the form since valid is not true

                }else {
                    //display some error to the user
                }

            });


            //always returning false otherwise, so the form never submits
            return false;
        });

    });

});

Answer 2

变化

$('#post').submit(function () {

到

$('#post').submit(function (e) {
  e.preventDefault();
  ....

或其他选项是不要使用＆＃34;提交＆＃34;按钮。使用＆＃34;按钮＆＃34;点击＆＃34;＆＃34;按钮＆＃34;事件。检查一切是否正常，如果是，请执行

....
    if (fine = true){
      $("#post").submit();
    }
...

使用ajax停止提交提交

2 个答案: