Reply To: Trigger verification of the form without submitting it

• gazaian1

• July 22, 2018 at 3:28 am

Hey ninobysa,

I am still working on my multistep form, i realized that i would need to create my own validation.

$(".nextone").click(function(e){
        e.preventDefault();

            $.ajax({
                dataType: 'json',
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: 'epm_registration_process',
                    epformdata: $('#field-group-1 input, #field-group-1 select').serialize()
                },
                success: function(resp) {
                    if (resp === true) {
                        //successful validation
                        if(animating) return false;
                        animating = true;
                        
                        current_fs = $(this).parent();
                        next_fs = $(this).parent().next();
                        
                        //activate next step on progressbar using the index of next_fs
                        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
                        
                        //show the next fieldset
                        next_fs.show(); 
                        //hide the current fieldset with style
                        current_fs.animate({opacity: 0}, {
                            step: function(now, mx) {
                                //as the opacity of current_fs reduces to 0 - stored in "now"
                                //1. scale current_fs down to 80%
                                scale = 0.8 + (1 - now) * 0.2;
                                //2. bring next_fs from the right(50%)
                                left = (now * 50)+"%";
                                //3. increase opacity of next_fs to 1 as it moves in
                                opacity = 1 - now;
                                /*current_fs.css({
                                    'transform': 'scale('+scale+')',
                                    'position': 'absolute'
                                });*/
                                next_fs.css({'opacity': opacity});
                            }, 
                            duration: 0, 
                            complete: function(){
                                current_fs.hide();
                                animating = false;
                            }, 
                            //this comes from the custom easing plugin
                            easing: 'easeInOutBack'
                        });
                        return false;
                    } else {
                        $.each(resp, function(i, v) {
                            console.log(i + " => " + v); // view in console for error messages
                            if( $('input[name="' + i + '"], select[name="' + i + '"]').hasClass('inputTxtError') ){}else{
                                var msg = '<div class="acf-notice -error acf-error-message"><p>'+v+'</p></div>'
                                $('input[name="' + i + '"], select[name="' + i + '"]').addClass('inputTxtError').before(msg);
                            }
                        });
                        var keys = Object.keys(resp);
                        $('input[name="'+keys[0]+'"]').focus();
                    }
                    return false;
                },
                error: function(errorThrown) {
                    console.log(errorThrown);
                }
            });
            return false;

    });

PHP CODE:

function epm_registration_process($post_id){
    //Prepare basic user info
    $username = strtolower($_POST['acf']['field_5b4be98fd288c']);
    $firstname = $_POST['acf']['field_5b4be9d8d288d'];
    $lastname = $_POST['acf']['field_5b4be9e8d288e'];
    $email = $_POST['acf']['field_5b4be9f7d288f'];
    $password = $_POST['acf']['field_5b4bea0bd2890'];
    $cpassword = $_POST['acf']['field_5b4bea8bd2891'];

    $error = array();
    //IMPORTANT: You should make server side validation here!
    if( empty($username) ){
        $_SESSION['errors']['acf[field_5b4be98fd288c]'] = "Please enter a username";
    }elseif(username_exists( $username )){
        $_SESSION['errors']['acf[field_5b4be98fd288c]'] = "Username already exist";
    }

    if( empty($firstname) ){
        $_SESSION['errors']['acf[field_5b4be9d8d288d]'] = "Please enter your firstname";
    }

    if(count($_SESSION['errors']) > 0){
	    //This is for ajax requests:
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
            echo json_encode($_SESSION['errors']);
            exit();
        }
	    //This is when Javascript is turned off:
        echo '<ul>';
        foreach($_SESSION['errors'] as $key => $value){
            echo '<li>' . $value . '</li>';
        }
            echo '</ul>';
        exit();
    }else{
	//form validation successful - process data here!!!!
   
       
    }   
}
add_action('wp_ajax_epm_registration_process', 'epm_registration_process');
add_action('wp_ajax_nopriv_epm_registration_process', 'epm_registration_process');
add_filter('acf/pre_save_post' , 'epm_registration_process', 10, 1 );

I am stuck at how can i get $_POST data if form does not submit the normal way hence i cannot validate against a user already existing in the database etc… i am only able to check if the field is empty