使用Ajax

时间:2015-10-09 19:39:36

标签: jquery ajax validation google-form

我正在尝试验证表单上的条目,然后再将它们传递到Google表格。

我的表单在验证电子邮件字段时工作正常但是我无法弄清楚我在单选按钮字段和文本区域字段中出错了。

我已经阅读了这么多帖子,我感到很困惑。我相信我对“错误”感到困惑。和' .control-group'。请在下面找到我的代码。

在填写表单时出错时,我还希望自定义表单加载到我的网站而不是谷歌表单。

感谢您的帮助。

<script type="text/javascript">
    // Handle form submission
    $('#ss-form').submit(function(e) {
        var button = $('input[type=submit]', this),
            data = $(this).serialize();

        e.preventDefault();
        if (validate($(this))) {
            button.button('loading');
            $.ajax({
                type: 'POST',
                url: "https://docs.google.com/forms/d/1HNUn0m70hGAiewLV2WfarDtu4kwLJoJrmtS0PjX3RAM/formResponse",
                dataType: "xml",
                data: data,
                complete: function() {
                    button.button('reset');
                    // After submission, redirect to main page
                    window.location = 'http://qwameselase.wix.com/black-n-beautiful#!contact/c1n3j';
                }
            });
        }

        // All fields are required
        function validate(#ss-form) {

            $('.control-group').removeClass('error');
            $('input, textarea', #ss-form).each(function() {
                var tag = $(this)[0].tagName.toLowerCase(),
                    type = $(this).attr('type');

                // Validate radio buttons
                if (tag === 'input' && type === 'radio') {
                    var name = $(this).attr('name');
                    if ($('[name="' + name + '"]:checked').length < 1) {
                        $(this).parent().parent().parent().addClass('error');
                    }
                }

                // Validate text fields
                if ((tag === 'input' && type === 'text') || tag === 'textarea') {
                    if ($(this).val() === '' && !$(this).parent().hasClass('radio')) {
                        $(this).parent().parent().addClass('error');
                    }
                }

                // Validate email fields
                if (tag === 'input' && type === 'email'){
                    function validateEmail(email) {
                        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                        return re.test(email);
                    }

                }

            });

            if ($('.control-group.error').length < 1) return true;
            $('.control-group.error').length

            $('html, body').animate({
                scrollTop: $('.control-group.error').offset().top - 20
            }, 500);

            return false;
        }
    });
</script>

<form id="ss-form" method="POST" onsubmit="" action="https://docs.google.com/forms/d/1HNUn0m70hGAiewLV2WfarDtu4kwLJoJrmtS0PjX3RAM/formResponse?embedded=true">
    <fieldset>
        <legend>Personal Details</legend>
        <div>
            <label for="entry_244604360">First Name</label>
                <input id="entry_244604360" type="text" name="entry.244604360" value="" maxlength="100">
        </div><br>
        <div>
            <label for="entry_403969165">Last Name</label>
                <input id="entry_403969165" type="text" name="entry.403969165" value="" maxlength="100">
        </div><br>
        <div>
            <label for="entry_1520202759">E-Mail</label>
                <input id="entry_1520202759" type="email" name="entry.1520202759" value="">
        </div><br>
        <div>
            <label for="entry_294268486">Contact Number</label>
                <input id="entry_294268486" type="text" name="entry.294268486" value="" maxlength="15">
        </div>                                          
    </fieldset><Br>
    <fieldset>
        <legend>Canvas Type</legend>
        <div>
            <label for="entry_1505307714">Canvas Type</label><br><br>
                <input id="group_1123680937_1" type="radio" name="entry.1123680937" value="Booking Only">Book a spot, pick canvas at event RM 50<br><br><br>
                <label>
                    <input id="group_1123680937_2" type="radio" name="entry.1123680937" value="4x4single" />
                    <img src="http://static.wixstatic.com/media/253d02_dec03f3ad51c403e945281f6ee98240f.jpg_srb_p_600_556_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:15%" alt="40x40x1 / Single / RM 195">
                </label>
                <label>
                    <input id="group_1123680937_3" type="radio" name="entry.1123680937" value="4x4diptych" />
                    <img src="http://static.wixstatic.com/media/253d02_805d3463f30f48d9b814791099c23a95.jpg_srb_p_746_378_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:30%" alt="40x40x2 / Diptych / RM 325">
                </label>
                <label>
                    <input id="group_1123680937_4" type="radio" name="entry.1123680937" value="4x4triptych" />
                    <img src="http://static.wixstatic.com/media/253d02_133bac604e744812aaa82e8c11f6d63b.jpg_srb_p_1106_409_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:40%" alt="40x40 / Triptych / RM 455">
                </label><br><br><br>
                <label>
                    <input id="group_1123680937_5" type="radio" name="entry.1123680937" value="4x9single" />
                    <img src="http://static.wixstatic.com/media/253d02_add84feb205b4ffe9d2a31bf6ff5d7a6.jpg_srb_p_600_567_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:15%" alt="40x90 / Single / RM 350">
                </label>
                <label>
                    <input id="group_1123680937_6" type="radio" name="entry.1123680937" value="4x9diptych" />
                    <img src="http://static.wixstatic.com/media/253d02_22045721297f4b3c9e8f1c46d9bb0bec.jpg_srb_p_600_567_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:30%" alt="40x90 / Diptych / RM 610">
                </label>
                <label>
                    <input id="group_1123680937_7" type="radio" name="entry.1123680937" value="4x9triptych" />
                    <img src="http://static.wixstatic.com/media/253d02_cffba0d8eee742f2b24c815b310240f0.jpg_srb_p_704_525_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:40%" alt="40x90 / Triptych / RM 865">
                </label><br><br><br>
                <label>
                    <input id="group_1123680937_8" type="radio" name="entry.1123680937" value="6x10single" />
                    <img src="http://static.wixstatic.com/media/253d02_28767a3b1e694403846cb80f04ab1338.jpg_srb_p_600_567_75_22_0.50_1.20_0.00_jpg_srb" style="max-width:20%" alt="60x100 / Single / RM 525">
                </label><br>

        </div>
    </fieldset><Br>
    <fieldset>
        <legend>Remarks</legend>
        <div>
            <label for="entry_508497383">Comments</label><br>
            <textarea id="entry_508497383" rows="3" cols="100" name="entry.508497383" value=""></textarea>
        </div>
    </fieldset><Br>
    <fieldset>
        <legend>Get in Touch</legend>
        <div>
            <label for="entry_1014633536">Notify me of upcoming workshops?</label><br>

            <input id="group_1558721004_1" type="radio" name="entry.1558721004" value="Yes" /> Yes <Br>             
            <input id="group_1558721004_2" type="radio" name="entry.1558721004" value="No" /> No <Br>           
        </div>
    </fieldset><Br><Br>
    <div style="text-align: center;">
        <input type="submit" name="submit" value="Submit" id="ss-submit">
    </div>
</form>

0 个答案:

没有答案