Получение всех полей формы для проверки одновременно, включая recaptcha - PullRequest
Новая
       14

Получение всех полей формы для проверки одновременно, включая recaptcha

0 голосов
/ 24 октября 2018

У меня была установлена ​​форма со всей проверкой, которая произошла одновременно, но я добавил Google re-captcha и хочу, чтобы следующая ошибка #grecaptchaError появлялась при появлении всех других ошибок.

Прямо сейчас, если все пусто, и вы нажимаете, отправьте сообщение об ошибке recaptcha - единственное, что показывает ... как только вы установите флажок для проверки, появятся другие ошибки.Sitekey подходит для моего домена и работает, поэтому, пожалуйста, не обращайте внимания на ошибку в codepen.Буду признателен за любую помощь в перестройке JQuery.

Ссылка Codepen 

function checkCaptcha() {
console.log('checkCaptcha');
if(allowSubmit) return true;
// e.preventDefault();
$('#grecaptchaError').text('Please confirm that you are not a robot');
return false;

}

ОБНОВЛЕНИЕ:

Я нашел метод обратного вызова, который проверяет скрытое значение, и теперь все ошибки отображения отображаются одновременно, я просто знаю, что JQuery неуместен, потому что он циклично проходит без нажатия кнопки отправки и дает успехсообщение.Он начал делать это, когда я добавил $.ajax({ вниз.

Новая ссылка на Codepen здесь

1 Ответ

0 голосов
/ 24 октября 2018

Ваша последовательность проверки ошибок выглядит как капча -> проверка jQuery.Вот почему вы не видите другое сообщение об ошибке, потому что вы возвращаетесь, если приходит сообщение об ошибке с помощью капчи.

Я обновил ваш код Javascript, поэтому сначала выполняется проверка JQuery, и, если она прошла успешно, выполняется проверка с проверкой. 

  var allowSubmit = false;
  function captchaCb(response) {
    allowSubmit = true;
    console.log('this is reCaptcha response: ' + response);
  }
  function checkCaptcha() {
    console.log('checkCaptcha');
    if(allowSubmit) return true;
    // e.preventDefault();
    $('#grecaptchaError').text('Please confirm that you are not a robot');
    return false;
  }
  $("#form-submit").click(function() {
   $("#contact-form").submit();

  }); 
  $("#contact-form").validate({
    rules: {
      name: {
        required: true,
        minlength: 2,
      },
      email: {
        required: true,
        email: true,
      },
      budget: {
        required: true,
      },
      message: {
        required: true,
        minlength: 5,
      },
    },
    messages: {
      name: {
       required: "come on, you have a name don't you?",
       minlength: "your name must consist of at least 2 characters"
     },
     email: {
       required: "no email, no message"
     },
     budget: {
       required: "Please select your budget"
     },
     message: {
       required: "um...yea, you have to write something to send this form.",
       minlength: "thats all? really?"
     }
   },
   errorPlacement: function(error, element) {
    if (element.attr("name") == "name" )  {
      error.appendTo('#nameError');
    }
    if (element.attr("name") == "email" )  {
      error.appendTo('#emailError');
    }
    if (element.attr("name") == "budget" )  {
      error.appendTo('#budgetError');
    }
  if (element.attr("name") == "g-recaptcha-response" )  {
      error.appendTo('#grecaptchaError');
    }
    if (element.attr("name") == "message" )  {
      error.appendTo('#messageError');
    }
  },
  submitHandler: function(form) {

  if (!checkCaptcha()) {
      console.log('captcha error occurs ');
     return;
    }
    $.ajax({
      //dataType: "jsonp",
      url: "example.com",
      data: $("#contact-form").serialize()
    }).done(function() {
      //callback which can be used to show a thank you message
      //and reset the form
      $("#contact-form").hide();
      $(".form-thank-you").fadeIn("400");
    });
      return false; //to stop the form from submitting
    }
  });
...