Плагин проверки формы JQuery и Ajax - PullRequest
0 голосов
/ 07 октября 2018

Я использую JQuery Form Validator и новичка в Ajax.Проверка работает нормально, но моя проблема в том, что она все равно отправит форму, даже если есть ошибки.


<form method="post" id="contactForm" onsubmit="return submitdata();">
    <p><input type="text" id="v_name" placeholder="Enter name here..." data-validation="required"></p>
    <p><input type="email" id="v_email" class="email" placeholder="Enter email here..." data-validation="email"></p>
    <p><textarea id="v_message" placeholder="Enter message here..." data-validation="required"></textarea></p>
    <input type="submit" value="Submit"/>
</form>
<p id="success"></p>

<script>
$.validate({
form : '#contactForm' // initiliaze form validation
});


function submitdata()
    {
     var name    = $("#v_name").val();
     var email   = $("#v_email").val();
     var message = $("#v_message").val();

         $.ajax({
          type: 'post',
          url: 'functions.php',
          data: {
           post_name    : name,
           post_email   : email,
           post_message : message
          },
          success: function (response) {
           $('#success').html("Thanks! I will get in touch with you soon.");
           $("#contactForm")[0].reset();
          }
     });    

        return false;

    }
</script>

1 Ответ

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

Пожалуйста, побалуйте себя моей краткостью:

  • Удалите атрибут onsubmit="return submitdata()".Вместо этого подключитесь к API проверки (см. Ниже).
  • Метод $.validate({}) имеет свойство конфигурации с именем onSuccess, которое принимает функцию.Либо назначьте функцию submitdata этому свойству, либо присвойте ей анонимную функцию и вызовите в ней функцию submitdata().

В этом скрипте приведен пример http://jsfiddle.net/uwx40zq7/#&togetherjs=F7NqwDLRmp.

Пожалуйста, смотрите эту ссылку для параметров конфигурации для проверки формы jQuery http://www.formvalidator.net/#configuration.

Вы были близки к тому, чтобы сделать это правильно.Проблема в том, что вы добавили атрибут onSubmit в форму, а также подтвердили форму с помощью $.validate() в то же время.Они не были связаны друг с другом, и поэтому не могли узнать друг о друге.Используя свойство onSuccess конфигурации $.validate(), вы подключаете функцию отправки к API валидации и говорите ей использовать функцию submitdata(), только если нет ошибок валидации.

Пожалуйста,дайте мне знать, если мне нужно объяснить это лучше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...