Question

所以我陷入了这个死胡同。我有AJAX脚本和jQuery Validation插件。使用此脚本，当我的页面加载空联系表单时自动提交。如果我移动或添加$('#submit').click(function () {通过AJAX脚本部分，在$(document).ready(function() {下方，然后提交它将忽略我的验证表单。

非常感谢任何帮助。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js'></script>
<script>
    var captcha_a = Math.ceil(Math.random() * 10);
    var captcha_b = Math.ceil(Math.random() * 10);
    var captcha_c = captcha_a + captcha_b;

    function generate_captcha(id){
        var id = (id) ? id : 'lcaptcha';
        $("#"+id).html(captcha_a + " + " + captcha_b + " = ");
    }

    $(document).ready(function() {

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

            jQuery.validator.addMethod("math",
                function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; },
                jQuery.format("Please enter the correct value for {0} + {1}")
            );

            $("#commentform").validate({
                rules: {
                    captcha: {
                        math: [captcha_a, captcha_b]
                    }
                }
            });

        });

    })
</script>

<script>
    $(document).ready(function() {

        var name = $('input[name=name]');
        var phone = $('input[name=phone]');
        var email = $('input[name=email]');
        var reason = $('select[name=reason]');
        var info = $('textarea[name=info]');

        var data = 'name=' + name.val() + '&phone=' + phone.val() + '&email=' + email.val() +'&reason=' + reason.val() + '&info='  + encodeURIComponent(info.val());

        $('.loading').show();

        $.ajax({
            url: "ajaxformtoemail.php",
            type: "GET",
            data: data, 
            cache: false,
            success: function (html) {  
                if (html==1) {
                    $('.form').fadeOut('slow'); 
                    $('.done').fadeIn('slow');
                } else alert('Sorry, unexpected error. Please try again later.');
            }
         });
         return false;
    });
</script>

Answer 1

您的ajax正在页面加载时运行，因为没有任何东西阻止它。您需要将ajax代码放在事件处理程序中，这样只有在表单通过验证时才会调用它。

以下是Validation Plugin正确实现的示例。而且您不需要将validate()放在单击处理程序中。 Validation插件内置了一堆自己的处理程序，包括submitHandler，当表单通过验证时会触发。{/ p>

<script type='text/javascript'>

$(document).ready(function() {

    jQuery.validator.addMethod("math",
        function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; },
        jQuery.format("Please enter the correct value for {0} + {1}")
    );

    $('form').validate({
        rules {
            // your rules
        },
        submitHandler: function(form) {
            $.ajax({
                // your ajax parameters
            });         
            return false;
        }
    });

});

</script>

Validation Plugin Documentation

有些问题......

您的代码更容易阅读和阅读如果使用了适当的缩进和标准格式，则进行故障排除。
无需使用重复的document.ready函数。一切都可以在一个内部。
与＃2类似，您不需要单独的<script></script>标记集来包含您的代码。一切都可以封闭一次。

AJAX和jQuery验证问题

1 个答案: