javascript 示例jQuery使用Ajax验证和提交

Posted 2021-05-04

var hotel_registration = function() {

    var handleSubmit = function() {
        jQuery('#hotel_registration_form').validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: true, // do not focus the last invalid input
            rules: {
                team_reserve: 'required',
                team_name: 'required',
                age_group: 'required',
                team_travel_contact: 'required',
                address: 'required',
                city: 'required',
                state: 'required',
                zip: 'required',
                daytime_phone: 'required',
                cell_phone: 'required',
                hotel_1: 'required',
                hotel_2: 'required',
                hotel_3: 'required',     
                hotel_4: 'required',
                hotel_5: 'required',                                   
                email: {
                    required: true,
                    email: true
                }
            },
            
            highlight: function(element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },

            success: function(label) {
                label.closest('.form-group').removeClass('has-error');
                label.remove();
            },

            submitHandler: function(form) {
                formProcess();
            }
        });

        $('#hotel_registration_form input').keypress(function(e) {
            if (e.which == 13) {
                if ($('#hotel_registration_form').validate().form()) {
                    formProcess();
                }
                return false;
            }
        });
    }

    var formProcess = function() 
    {
        var regform = $('#hotel_registration_form');
        var $btn = $('#btn_submit');

        $.ajax({
            type: "post",
            url: hotelregistration.ajax_url,
            data: regform.serialize(),
            dataType: "json",
            beforeSend: function() {
                $('#message').html('').hide();
                $("input, select, textarea").prop('disabled', true);
                $btn.button('loading');
            },
            error: function (xhr,status,error) {
                console.log(xhr);
                console.log(status);
                console.log(error);
                
                $('#message').html('<div class="alert alert-danger" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Failed send email. Message error: </strong>' + error + '</div>');
            },
            success: function (response) {
                // console.log(response);
                if ( response.status == 'OK' )
                {
                    $('#message').html('<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + response.message + '</div>');
                }
                else
                {
                    $('#message').html('<div class="alert alert-danger" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + response.message + '</div>');                    
                }
            }
        }).complete(function() {
            $('html, body').animate({
                scrollTop: $("#form_scroll").offset().top
            }, 500, function() {
                $('#hotel_registration_form').fadeOut('fast', function() {
                    $btn.button('reset');
                    $("input, select, textarea").prop('disabled', false);
                    $('#message').fadeIn('fast');
                    $('form :input').val('');
                });
            });
        });
    }

    return {
        //main function to initiate the module
        init: function() {
            handleSubmit();
        }

    };

}();

    hotel_registration.init();