javascript - 联系表单变量未从部分标记传递到 javascript

Question

联系表单变量未传递到 JavaScript 中。基本上javascript验证失败。在调试时，我收到“undefined is not a function.” 我在此页面上有几个分隔符。如果我将相同的代码放入单独的页面中，例如 "contact.html" 变量会传递到 JavaScript 中。

我的理解是 HTML tag id="contact-form" 由于某种原因不会传递到函数中。

Java 脚本

function code_contactvalidation() {

    // Add form.special data (required for validation)
    $('form.special input, form.special textarea').each(function() {
        this.data = {};
        this.data.self = $(this);
        var val = this.data.self.val();
        this.data.label = (val && val.length) ? val : null;
        this.data.required = this.data.self.attr('aria-required') == 'true';
    });

    // Special form focus & blur
    $('form.special input, form.special textarea').focus(function() {
        with (this.data) {
            console.log('focusing');
            if ( label && self.val() == label) self.val('');
            else return;
        }
    }).blur(function() {
        with (this.data) {
            if ( label && self.val().length == 0 ) self.val(label)
            else return;
        }
    });

    // initialize captcha

    var randomcaptcha = function() {
        var random_num1=Math.round((Math.random()*10));
        var random_num2=Math.round((Math.random()*10));
        document.getElementById('num1').innerHTML=random_num1;
        document.getElementById('num2').innerHTML=random_num2;
        var n3 = parseInt(random_num1) * parseInt(random_num2);
        $('#captcharesult').attr('value', n3);
        $('#buttonsubmit').attr('value','Submit');
    };

    randomcaptcha();

    //initialize vars for contact form
    var sending = false,
        sent_message = false;

    $('#contact-form').each(function() {
        var _this = this;
        this.data = {};
        this.data.self = $(this);
        this.data.fields = {};
        this.data.labels = {};
        this.data.notification = this.data.self.find('.notification');
            _.each(['name','email','subject'], function(name) {
            _this.data.fields[name] = _this.data.self.find(_.sprintf('input[name=%s]', name));
            _this.data.labels[name] = _this.data.fields[name].val();
        });
    }).validate({
        errorPlacement: function() {},
        highlight: function(element) { $(element).addClass('invalid'); },
        unhighlight: function(element) { $(element).removeClass('invalid'); },
        submitHandler: function(form) {

            if (sending) return false;
            if ( sent_message ) { alert('Your message has been sent, Thanks!'); return false; }

            var field, valid = true;
            with (form.data) {
                _.each(fields, function(field, name) {
                    if ( $.trim(field.val()) == labels[name] ) { valid = false; field.addClass('invalid'); } else { field.removeClass('invalid'); }
                });
            }

            if (valid) {
                sending = true;
                $('#ajax-loader').show();
                form.data.self.ajaxSubmit({
                    error: function(errorres) {
                        $('#ajax-loader').hide();
                        randomcaptcha();
                        form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Unable to send message (Unknown server error)');
                        form.data.notification.animate({opacity: 100}).fadeIn(500);
                        },
                    success: function(res) {
                        sending = false;
                        $('#ajax-loader').hide();
                        if (res == 'success') {
                            sent_message = true;
                            form.data.notification.removeClass('error').addClass('success').find('span:first-child').html('Your message has been sent!');
                            form.data.notification.animate({opacity: 100}).fadeIn(500);
                            $('#formName').val("");
                            $('#formEmail').val("");
                            $('#formSubject').val("");
                            $('#formMessage').val("");
                            $('#formcheck').val("");
                        } else if (res == 'captchaerror') {
                            randomcaptcha();
                            form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Captcha Error');
                            form.data.notification.animate({opacity: 100}).fadeIn(500);
                        } else {
                            randomcaptcha();
                            form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Unable to send message (Unknown server error)');
                            form.data.notification.animate({opacity: 100}).fadeIn(500);
                        }

                    }
                });
            }
            return false;
        }

    });
}

HTML

<section id="contact">
    <div class="container">
        <div class="row text-center">
            <div id="principal" data-align="left">
                <div class="form_group_contact">

                    <script type="text/javascript" src="js/jquery.validate.pack.js"></script>
                    <script type="text/javascript" src="js/jquery.form.js"></script>

                    <form class="contactForm special validate" id="contact-form" action="sendmsg.php" method="post">
                        <p><input id="formName" name="name" type="text" value="Name" class="required" /></p>
                        <p><input id="formEmail" name="email" type="text" value="Email" class="required email" /></p>
                        <p><input id="formSubject" name="subject" class="last required" type="text" value="Subject" /></p>
                        <p><textarea id="formMessage" name="message" class="required margin20" rows="4" cols="83"></textarea></p>
                        <div class="form_captcha margin20">
                            <p>Captcha Recognition &#40;<span id="num1"></span> &#42; <span id="num2"></span>&#41;&#32;&#61;
                                <input type="hidden" id="captcharesult" name="captcha_result" value=""/>
                                <input type="text" class="required number" maxlength="3" size="3" id="formcheck" name="captcha" value=""/>
                             </p>
                        </div>
                        <p class="notification" style="display: none;"><span></span> <span class="close" data-action="dismiss"></span></p>
                        <p><input type="submit" value="" class="margin20" id="buttonsubmit" /><img id="ajax-loader" alt="" src="./images/ajax-loader.gif" /></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

if ( label && self.val().length == 0 ) self.val(label)

需要有一个半栏 (;) 来结束该行;)另外，您在联系表格上称呼“每个”，这让我认为您期望不止一份联系表格。您需要在 HTML 中将标识符设置为“class”而不是“id”，并使用“.”。在 jQuery 选择器中而不是“#”。

现在您已经修复了这些小问题，请在 Firefox 中尝试一下。 Google 对 javascript 错误非常模糊，Firefox 会给你更好的错误消息。请与我们分享，以便我可以编辑这篇文章并提供最终解决方案。