Проверка формы html5, действие void form и выполнение jQuery, когда все элементы формы html5 проверяются? - программирование
Подтвердить что ты не робот

Проверка формы html5, действие void form и выполнение jQuery, когда все элементы формы html5 проверяются?

У меня есть простая форма 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");
        }
      }
    });
  });
});
4b9b3361

Ответ 1

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

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

    // do whatever you want here
});

Ответ 2

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

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

    return false;
});

Ответ 3

Использование чистой java script

  <script>

document.getElementById('membershipform').addEventListener("submit", function(e)
{
        event.preventDefault();
        //write stuff
});

   </script>

Ответ 4

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

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

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