AJAX и JQuery подтверждают проблему - PullRequest
Новая
       12

AJAX и JQuery подтверждают проблему

0 голосов
/ 27 февраля 2012

Так что я застрял в этом тупике.У меня есть сценарий AJAX и плагин проверки JQuery.С помощью этого скрипта при загрузке моей страницы пустая контактная форма автоматически подает на себя.Если я перемещу или добавлю $('#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>

1 Ответ

1 голос
/ 27 февраля 2012

Ваш ajax работает при загрузке страницы, потому что его ничто не останавливает.Вам нужно поместить код ajax в обработчик событий, чтобы он вызывался только в том случае, если / когда ваша форма прошла проверку.

Ниже приведен пример правильной реализации подключаемого модуля проверки.И вам не нужно помещать validate() в обработчик кликов.Плагин Validation имеет несколько встроенных обработчиков, включая submitHandler, который запускается, когда форма проходит проверку. 

<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

Некоторыепобочные проблемы ...

  1. Ваш код будет намного легче читать и устранять неполадки, если вы используете правильные отступы и стандартное форматирование.

  2. Естьне нужно использовать дубликаты document.ready функций.Все может быть внутри одного.

  3. Как и в # 2, вам не нужны отдельные наборы тегов <script></script> для хранения вашего кода.Все может быть заключено один раз.

...