Проверка формы HTML5, аннулировать действие формы и выполнить JQuery, когда все элементы формы HTML5 проверены?

Question

У меня есть простая форма HTML5, которую я хочу использовать для проверки требуемого поля.Моя проблема в том, что я хочу использовать проверку формы HTML5, НО в то же время избегать фактической отправки формы, потому что вместо этого я хочу выполнить вызов jQuery ajax.Я знаю, что вы можете отключить проверку html5, но я хочу оставить это в качестве основного метода проверки формы вместо плагина jQuery.

Есть мысли?

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
    <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
    <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>    
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>      
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
    <p>
        <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
    </p>
</form> 

JAVASCRIPT:

$(function(){
  $("#submitbtn").click(function(){
    $.ajax({
      url: "<?php bloginfo('template_url') ?>/ajax-membership.php",
      success: 
      function(txt){
        if(txt){
          $("#thankyou").slideDown("slow");
        }
      }
    });
  });
});

Answer 1

В соответствии с этим: Поддерживают ли какие-либо браузеры метод checkValidity () в HTML5? , и это может быть не самой последней истиной, поскольку HTML5 находится в стадии разработки, Form.checkValidity() и element.validity.valid должныПозволяет вам получить доступ к информации проверки из JavaScript.Предполагая, что это правда, ваш jQuery должен присоединиться к отправке формы и использовать это:

$('#membershipform').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do whatever you want here
});

Answer 2

Использование:

$('#membershipform').submit(function(){
    // do whatever you want here

    return false;
});

Answer 3

Это тонкий рычаг поведения по умолчанию и JavaScript для создания того, что вы хотите.

var form = document.getElementById("purchaseForm");
if(form.checkValidity()){
    console.log("valid");
    e.preventDefault();
}else{
    console.log("not valid");
    return;
}

Если форма действительна, предотвращайтеDefault () и продолжайте выполнять свою функцию (например, отправлять через ajax). Если значение недействительно, вернитесь, не предотвращая значение по умолчанию, вы должны найти действия по умолчанию для проверки формы, которые выполняются на входах формы.

Answer 4

Использование сценария чистого Java

<script>

    document.getElementById('membershipform')
        .addEventListener("submit", 
            function(event) {
                event.preventDefault();

                // write stuff

            });

</script>