jQuery .submit() с валидиране и без опресняване на страницата

Имам проблем, който другите изглежда имат, но не мога да накарам препоръчаното решение (т.е. „връщане на невярно;“) да работи. Всяка помощ би била чудесна!

Описание:

Когато формулярът бъде изпратен, искам да потвърдя, че въведеното е в правилния формат (т.е. type="email") и да стартирам предупреждение (т.е. „Формулярът е изпратен.“) без страницата да се опреснява . В момента предупреждението не се появява и страницата се опреснява.

Тестов код:

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- JavaScript -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <!-- Form -->
        <form>
            <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
            <button type="submit" id="submit">Submit</button>
        </form>

        <!-- Alert on Submission -->
        <script>
            console.log("Ready to Go!");
            $('#submit').submit(function () {
                alert("Form submitted.");
                return false;
            });
        </script>
    </body>
</html>

javascript validation html jquery form-submit
person Jesse    schedule 07.10.2014    source източник
comment
Страницата ще трябва да се обнови в крайна сметка, освен ако не превключите към AJAX публикация. Просто се опитвате да уловите грешки и след това да изпратите, след като бъдат коригирани?   -  person Cᴏʀʏ    schedule 08.10.2014
comment
Защо изобщо да използвате бутон за изпращане? Защо не обикновен бутон със събитието click?   -  person antlersoft    schedule 08.10.2014
comment
Като странична бележка, 25px не е валиден размер за входове, просто искате 25: w3schools. com/tags/att_input_size.asp   -  person Ben Temple-Heald    schedule 08.10.2014

Отговори (4)


arrow_upward
4
arrow_downward

Вие ще искате да хванете събитието submit на формуляра. Няма събитие submit на бутон.

        $('form').submit(function () {
            if (*everything ok*) {
                alert("Form submitted.");
            } else {
                return false;
            }
        });

В идеалния случай бихте помогнали да идентифицирате своя <form>, или с ID, или с клас, т.е.:

<form id="xyz-form">

И след това променете своя селектор на:

$('#xyz-form').submit(...);

Сега това е само за спиране на изпращането на формуляра, когато има грешки. Когато return false; не е пътят, който поема обратното извикване на изпращане, страницата ви е ще се обнови. Ако искате да изпратите данните на сървъра без опресняване, ще трябва да подходите към това по различен начин.

person Cᴏʀʏ    schedule 07.10.2014
comment
може ли смирено да предложа $("#submit").closest("form")? - person Kyborek; 08.10.2014
comment
@Kyborek: Да, можете! Добавени са няколко думи за подобряване на селектора. - person Cᴏʀʏ; 08.10.2014

arrow_upward
2
arrow_downward

Дайте ID на вашия формуляр и променете своя jquery, за да използвате вместо това #formid.

Например :

<form id="form">
    <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
    <button type="submit" id="submit">Submit</button>
</form>

<script type="text/javascript">
    $('#form').submit(function () {
        alert("Form submitted.");
        return false;
    });
</script>
person Ben Temple-Heald    schedule 07.10.2014

arrow_upward
0
arrow_downward

Манипулаторът на събитие, прикрепен към функцията за изпращане в jQuery, може да бъде елемент на формуляр или елемент div. Прочетете повече за jQuery API Можете да приложите събитие за кликване, когато потребителят кликне върху бутона за изпращане без него поведение при подаване по подразбиране с функцията preventDefault на jQuery

console.log("Ready to Go!");
            $('form').submit(function () {
                alert("Form submitted.");
                return false;
            });
$("#submit").click(function(e){
      if (hasError){
          e.preventDefault();
      }
      else{
         alert("success");
      }
 })

Изявленията if и else са създадени за проста проверка. За обхвата на вашия въпрос оставям по-голямата част от кодирането за вашата креативност. Но можете основно да създадете проста функция, която да проверява за грешки при въвеждането на потребителя, ако има грешки, да предотврати поведението на подаването по подразбиране на бутона за изпращане. Ако въведените данни не са празни и ако въведените данни са без грешки, уведомете потребителя, че формулярът е изпратен.

person Nicki Chen    schedule 07.10.2014

arrow_upward
-2
arrow_downward

опитайте това вместо това

    $('#submit').click(function () {
        alert("Form submitted.");
        return false;
    });

ще постигне това, което искате.

основно щракването се задейства преди изпращането

опитайте този фрагмент, за да изясните нещата

 console.log("Ready to Go!");

$('#submit').click(function () {
  alert("Form submitted.");
  //return false;
  return true;
});

$("form").submit(function( event ) {
  alert("woot woot");
});
person Pav    schedule 07.10.2014
comment
Това пак ще изпрати формуляра. - person Cᴏʀʏ; 08.10.2014