На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> Invisible reCaptcha: с AJAX вызовом - бесконечный цикл
    Добрый день!
    Есть проблемы с AJAX вызовом и невилимой reCaptcha.

    Код:
    index.html
    ExpandedWrap disabled
      //header
       
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
      <script src="https://google.com/recaptcha/api.js?onload=initRecaptcha&render=explicit"></script>
       
      //форма
       
      <form enctype="multipart/form-data" method="POST" id="myForm" class="callback">                                    
          <div class="inputs">
              <label class="input input-name required">
                  <span class="placeholder">Name</span>
                  <input type="text" name="name">
              </label>
              <label class="input input-phone required">
                  <span class="placeholder">Phone</span>
                  <input type="text" name="phone" maxlength="12">
              </label>
              <label class="input input-mail">
                  <span class="placeholder">Email</span>
                  <input type="text" name="email">
              </label>
          </div>
       
          <div class="check">
              <label>
                  <input class="check-agree" type="checkbox" name="agree" checked="checked" value="1">
                  <span class="label">I agree <span class="agree-text js-agree-text">with terms and conditions</span></span>
              </label>
              <div id="status"></div>
          </div>
          <div class="submit-wrapper">
              <label class="submit">
                  <input class="submit-form-button js-submit-form" type="submit" value="Submit">
              </label>            
       
         </div>      
          <div id="form-recaptch"></div>
      </form>
       
       
      //конец
      <script type="text/javascript" src="js/form.js"></script>


    form.js, тут находится и валидация формы. Возможно её вызов "гасит" каптчу :-?

    ExpandedWrap disabled
      var submit_form_outer;
       
      var initRecaptcha = function(){
          if ( document.getElementById("form-recaptch") ) {
       
              recaptcha = grecaptcha.render("form-recaptch", {
                  'sitekey' : 'code',
                  'theme'    : 'dark',            
                  'badge'    : 'inline',
                  'size'     : 'invisible',
                  'callback' : submit_form_outer
              });
          }
      }
       
      $(function () {        
       
          $('.callback').submit(function (e) {
              submit_form($(this));
              e.preventDefault();
              /*stop refresh*/
              grecaptcha.execute();
              e.stopPropagation();
          });
       
          /*More Functions*/
       
          function validateEmail(form) {
              var email = form.find('[name="email"]');
              var re = /.+@.+\..+/g;
              if( re.test(email.val()) || email.val() === ""){
                  return true;
              } else {
                  email.closest('.input').addClass('error');
                  return false;
              }
          }
          function hasErrors (form) {
              var required = form.find('.required');
              var has_errors = false;
              required.each(function(){
                  if(!$(this).find('input').val()){
                      $(this).addClass('error');
                      has_errors = true;
                  }
              });
              return has_errors;
          }
       
       
          function submit_form() {
       
              if( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))){
                  return false;
              }
       
          var container = $("#form-recaptch").parents("form");
       
      $.ajax({
          method: "POST",
          url: "ajax.php",
          data: container.serialize(),
       
          success: function (responseObj, textStatus, xhr) {
                  alert(xhr.status);
              console.log(xhr.status);
                 if(xhr.status === '200'){
                     console.log('200');
                      container.submit();                
                      $('#myForm input').val('');
                      $('#myForm textarea').val('');                            
                      $('#status').html(responseObj);
                 }
                  else{
                      console.log('error');
                      console.log(xhr);
                      alert('error');
                      grecaptcha.reset();
                  }
       
          },
          error: function (xhr, error) {
            console.debug(xhr);
            console.debug(error);
            $("#status").html("Failed.");
            grecaptcha.reset();
          },        
       
      });        
          }
       
          submit_form_outer = submit_form;
       
          function Form () {
              /*...*/
       
       
              /*More Functions*/
              $('.form').on('click', '.js-agree-text', function () {
                  showAgreeBox();
                  openFormPanel();
                  return false;
              });
       
              $('.form').on('click', '.js-no-agree', function () {
                  agreeNo();
                  return false;
              });
       
       
              $('.form').on('click', '.js-yes-agree', function () {
                  agreeYes();
                  return false;
              });
       
              $('.check-agree').change(function() {
                  var form = $(this).closest('.form');
                  if($(this).is(":checked")) {
                      form.find('.js-submit-form').removeClass('disabled');
                  } else {
                      form.find('.js-submit-form').addClass('disabled');
                  }
       
              }
              /*More Functions*/
              this.callback = function () {
       
                  showThankBox();
                  openFormPanel();
       
                  $.fn.fullpage.setAllowScrolling(false);
       
              }
       
          }
          var mainform = new Form ();
      });


    ajax.php, из-за этих внесённых изменений в form.js:
    ExpandedWrap disabled
      if(xhr.status === '200'){
      xxx
      }
      else {}

    до него очередь уже не доходит. Там собственно находится проверка каптчи на сервере.

    Самое странное, что здесь:

    ExpandedWrap disabled
                 if(xhr.status === '200'){
                     console.log('200');
                      container.submit();                
                      $('#myForm input').val('');
                      $('#myForm textarea').val('');                            
                      $('#status').html(responseObj);
                 }
                  else{
                      console.log('error');
                      console.log(xhr);
                      alert('error');
                      grecaptcha.reset();
                  }


    я получаю два ответа: как "200", так и "error".

    Подскажите рабочее решение.
    Сообщение отредактировано: Kuzma -
      Ещё долго просидел с этим делом.
      Теперь после заполнения каптчи получаю бесконечный цикл в районе success: function

      :-?

      ExpandedWrap disabled
        var submit_form_outer;
         
        var initRecaptcha = function(){
            if ( document.getElementById("form-recaptcha") ) {
         
                recaptcha = grecaptcha.render("form-recaptcha", {
                    'sitekey' : '',
                    'theme'    : 'dark',
                    'type'     : 'image',
                    'badge'    : 'inline',
                    'size'     : 'invisible',
                    'callback' : submit_form_outer
                });
            }
        }
         
        $(function () {      
         
            submit_form_outer = submit_form;
         
            $('.callback').submit(function (e) {        
                submit_form($(this));
                e.preventDefault();
                /*stop refresh*/        
            /*    e.stopPropagation();*/
            });
            
         
         
            var phone = $('[name="phone"]'),
                input = $('input[type="text"], textarea');
         
         
         
            phone.click(function () {
                $(this).parent().removeClass('error');
                if ($(this).val().length == 0) {
                    $(this).val('+');
                }
            });
            phone.focusout(function () {
                if ($(this).val().length < 2) {
                    $(this).val('');
                }
            });
         
            phone.bind("change keyup input click", function() {
                if (this.value.match(/[^0-9+ ]/g)) {
                    this.value = this.value.replace(/[^0-9+ ]/g, '');
                }
            });
         
            input.focus(function () {
                $(this).parent().removeClass('error');
                $(this).parent().find('span').addClass('focused');
            });
            input.focusout(function(){
                if ($(this).val() == ''){
                    $(this).parent().find('span').removeClass('focused');
                }
            });
         
            function validateEmail(form) {
                var email = form.find('[name="email"]');
                var re = /.+@.+\..+/g;
                if( re.test(email.val()) || email.val() === ""){
                    return true;
                } else {
                    email.closest('.input').addClass('error');
                    return false;
                }
            }
            function hasErrors (form) {
                var required = form.find('.required');
                var has_errors = false;
                required.each(function(){
                    if(!$(this).find('input').val()){
                        $(this).addClass('error');
                        has_errors = true;
                    }
                });
                return has_errors;
            }
         
         
            function submit_form() {
                
                if( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))){
                    return false;
                }
                      
            
            var container = $("#form-recaptcha").parents("form");
            
         
            $.ajax({
                method: "POST",
                url: "ajax.php",
                data: container.serialize(),
                
                success: function (responseObj, textStatus, xhr) {                            
                      
                    console.log('success');
                    console.log(responseObj);
                      
                    container.submit();                
                    $('#myForm textarea').val('');                            
                    $('#status').html(responseObj);
                    
                   /*if(xhr.status === '200'){
                        $("#status").html('200');              
                    }
                    else{
                        console.log('else');
                        grecaptcha.reset();
                    }*/        
                                
                },
                error: function (xhr, error) {      
                  console.log('error');    
                  console.debug(error);
                  console.debug(xhr);          
                  $("#status").html("Failed.");
                  grecaptcha.reset();
                },        
                
            });
                grecaptcha.reset();
            }
            
            
         
            function Form () {
         
                function openFormPanel () {
                    $('body').addClass('form-panel-opened form-panel-close-callback');
                    $.fn.fullpage.setAllowScrolling(false);
                }
                function closeFormPanel () {
                    $('body').removeClass('form-panel-opened');
                    $('.button-menu').removeClass('active');
                    window.setTimeout(function () {
                        $('body').removeClass('form-panel-close-callback');
                        $.fn.fullpage.setAllowScrolling(true);
                    }, 700);
                }
         
                function showAgreeBox () {
                    $('.form .agreement-box').addClass('show');
                    $('.form .thank-box').removeClass('show');
                    $('.agreement .scrollable').scrollTop(0);
                }
                function showFormBox () {
                    $('.form .agreement-box').removeClass('show');
                    $('.form .thank-box').removeClass('show');
                }
                function showThankBox () {
                    $('.form .agreement-box').removeClass('show');
                    $('.form .thank-box').addClass('show');
                }
         
                function agreeYes(){
                    if($('body').hasClass('fp-viewing-2')){
                        closeFormPanel();
                    } else {
                        showFormBox();
                    }
                    $('.js-submit-form').removeClass('disabled');
                    $('.check-agree').prop('checked', true);
                }
                function agreeNo(){
                    if($('body').hasClass('fp-viewing-2')){
                        closeFormPanel();
                    } else {
                        showFormBox();
                    }
                    $('.js-submit-form').addClass('disabled');
                    $('.check-agree').prop('checked', false);
                }
         
         
                $('.form').on('click', '.js-agree-text', function () {
                    showAgreeBox();
                    openFormPanel();
                    return false;
                });
         
                $('.form').on('click', '.js-no-agree', function () {
                    agreeNo();
                    return false;
                });
         
         
                $('.form').on('click', '.js-yes-agree', function () {
                    agreeYes();
                    return false;
                });
         
                $('.check-agree').change(function() {
                    var form = $(this).closest('.form');
                    if($(this).is(":checked")) {
                        form.find('.js-submit-form').removeClass('disabled');
                    } else {
                        form.find('.js-submit-form').addClass('disabled');
                    }
                }).mouseover(function () {
                    $(this).addClass('hover');
                }).mouseout(function () {
                    $(this).removeClass('hover');
                });
         
                $('.form').on('click', '.js-submit-form', function () {
                    var form = $(this).closest('.form');
                    var agree = form.find('.check-agree').prop('checked');
                    if(!agree) return false;
                });    
                
                $('.form').on('click', function () {
                    if ( grecaptcha.getResponse() !== 0 ) {
                        grecaptcha.execute();
                    }
                });
         
                function resetForm () {
                    $('.form input[type="text"], .form textarea').each(function () {
                        $(this).val('');
                    });
                    $('.form .placeholder').removeClass('focused');
         
                    
                }
         
                this.callback = function () {
         
                    showThankBox();
                    openFormPanel();
                    $.fn.fullpage.setAllowScrolling(false);
         
                }
            }
            var mainform = new Form ();
        });
      1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
      0 пользователей:


      Рейтинг@Mail.ru
      [ Script Execution time: 0,0900 ]   [ 14 queries used ]   [ Generated: 10.12.18, 07:09 GMT ]