JQuery Проверка работает, но submitHandler не - PullRequest
2 голосов
/ 28 апреля 2020

У меня есть форма, которую я пытаюсь проверить с помощью JQuery Проверка, которая работает нормально. Когда нажата кнопка отправки, submitHandler должен: 1. отключить кнопку (для предотвращения многократных отправок) и 2. изменить текст кнопки.

Как есть, код работает для проверки, но не вызывает submitHandler.

Я просмотрел здесь множество тем, сказав, что кнопка должна быть type = "submit" внутри тегов <form> и т. Д. c. и не могу понять это. На кнопку все еще можно нажимать несколько раз.

Любая помощь?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>


<script type="text/javascript">


$(document).ready(function() {
  $("#freebottleform").validate({
     rules: {
       address : {
           required: true
       },
       city : {
           required: true
       },
       state : {
           required: true
       },
       zipcode : {
           required: true
       },
       phoneNumber : {
           required: true,
           phoneUS: true
       },
     },

     //Specify the validation error messages here
     messages: {
       email: {
         required: "Please enter email address",
        email: "Please enter a valid email address"
       },
       phoneNumber: {
         required : "Please enter your mobile number",
         digits: "Please enter digits only"
       }
     },
        submitHandler: function (form) {
            $("#finalSubmit").attr("disabled", true);
            $("#finalSubmit").html("Submitting... please wait.");
            form.submit();
        }

  });
});


</script>


<!DOCTYPE html>
<html lang="en">
<div class="freebottleform">

    <form method="post"  id="freebottleform" name="freebottleform" action="p6.php">
        Please enter your shipping details.<br>
        <br>
        Address:<br>
        <input type="text" name="address" class="required" placeholder="Please enter your address."/><br>
        <input type="text" name="address2" placeholder="Suite/Apt/Etc."/><br>
        <br>
        City:<br>
        <input type="text" name="city" class="required" placeholder="Please enter your city."/><br>
        <br>
        State:<br>
        <input type="text" name="state" class="required" placeholder="Please enter your state."/><br>
        <br>
        Zip Code:<br>
        <input type="text" name="zipcode" class="required" placeholder="Please enter your zipcode."/><br>
        <br>
        Phone Number:<br>
        <input type="text" name="phoneNumber" class="required" placeholder="Please enter your phone number."/><br>
        <br>
        <label><input type="checkbox" name="subscribe" id="subscribe" value="true" checked/> Subscribe to our newsletter to get FREE weekly tips sent right to your inbox!</label><br>
        <br>

    <button id="finalSubmit" type="submit" name="submit" value="final" >CONTINUE</button>

    </form>

</div>
</html>

Ответы [ 3 ]

0 голосов
/ 28 апреля 2020

1-й вместо того, чтобы делать проверки с помощью jQuery, выполните проверки на стороне сервера, как с PHP et c., И отразите выходные данные на странице отображения.

Пример здесь:

index. php

<!DOCTYPE html>
<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <h1>Form</h1>
    <div class="message"></div>
    <form method="post" action="" name="registrationForm">
      First Name <input type="text" name="fname"><br>
      Last Name <input type="text" name="lname"><br>
      Phone <input type="text" name="phone"><br>
      <input type="submit" value="Register" class="regbtn">
    </form>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $(".regbtn").click(function(){
          var form = document.registrationForm;
          var dataString = $(form).serialize();
          $.ajax({
            type: 'POST',
            url: "your-processing-page.php",
            data: dataString,
            cache: true,
            beforeSend: function(){
              $('.message').hide();
              $(".regbtn").prop('disabled', true).val('Please wait...');
            },
            success: function(data){
              $('.message').html(data).fadeIn();
              $(".regbtn").prop('disabled', false).val('Register');
            }
          });
          return false;
        });
      });
    </script>
  </body>
</html>

your-processing-page. php

<?php
$fname = (!empty($_POST['fname']))?$_POST['fname']:null;
$lname = (!empty($_POST['lname']))?$_POST['lname']:null;
$phone = (!empty($_POST['phone']))?$_POST['phone']:null;

if($_POST){
  // Perform Checks Here
  if(trim($fname) == ''){
    echo "Please enter first name.";
  }else if(trim($lname) == ''){
    echo "Please enter last name.";
  }else if((strlen($phone)) == 0){
    echo "Please enter a phone number";
  }else if((strlen($phone)) < 10){
    echo "Phone number must not contain less than 10 digits.";
  }else if((strlen($phone)) > 10){
    echo "Phone number must not contain more than 10 digits.";
  }else{
    // If all checks are cleared perform your query
    $stmt = $pdo->prepare("INSERT INTO members(mem_fname, mem_lname, mem_phone)VALUS(:fname, :lname, :phone)");
    $stmt-> bindValue(':fname', $fname);
    $stmt-> bindValue(':lname', $lname);
    $stmt-> bindValue(':phone', $phone);
    $stmt-> execute();

    if($stmt){
      echo "Success! User has been registered.";
    }else{
      echo "Sorry, something went wrong. Please refresh the page and try again!";
    }
  }
}
?>

Это полный ответ. Здесь:

  1. Проверка выполняется на стороне сервера с использованием PHP (лучший метод и должен соблюдаться).
  2. jQuery отключает кнопку отправки для предотвращения двойной отправки после щелчка.
  3. jQuery изменяет текстовое значение кнопки при нажатии кнопки отправки и возвращается к значению по умолчанию при успешном возврате из отправки формы.

Примечание: Выше приведен полностью рабочий «стандартный» пример кодирования. Вот как вы должны кодировать. Однако выполните другие необходимые проверки в соответствии с вашими потребностями. Возьмите приведенную выше кодировку только в качестве образца для создания собственного кода. Удачного кодирования:)

0 голосов
/ 28 апреля 2020

Измените имя кнопки отправки на другое, поскольку оно переопределяет функцию submit () в форме, тогда этот код должен работать для вас ( Reference ). ↓↓

$(document).ready(function() {
  $("#freebottleform").validate({
    rules: {
      address: {
        required: true
      },
      city: {
        required: true
      },
      state: {
        required: true
      },
      zipcode: {
        required: true
      },
      phoneNumber: {
        required: true,
        // phoneUS: true,
        digits: true
      },
    },

    //Specify the validation error messages here
    messages: {
      email: {
        required: "Please enter email address",
        email: "Please enter a valid email address"
      },
      phoneNumber: {
        required: "Please enter your mobile number",
        digits: "Please enter digits only"
      }
    },
    submitHandler: function(form) {
      $("#finalSubmit").attr("disabled", true);
      $("#finalSubmit").html("Submitting... please wait.");

      setTimeout(function() {
        form.submit();
      }, 3000);
    }

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>

</head>
<div class="freebottleform">

  <form method="post" id="freebottleform" name="freebottleform" action="p6.php">
    Please enter your shipping details.<br>
    <br> Address:
    <br>
    <input type="text" name="address" class="required" placeholder="Please enter your address." /><br>
    <input type="text" name="address2" placeholder="Suite/Apt/Etc." /><br>
    <br> City:
    <br>
    <input type="text" name="city" class="required" placeholder="Please enter your city." /><br>
    <br> State:
    <br>
    <input type="text" name="state" class="required" placeholder="Please enter your state." /><br>
    <br> Zip Code:<br>
    <input type="text" name="zipcode" class="required" placeholder="Please enter your zipcode." /><br>
    <br> Phone Number:<br>
    <input type="text" name="phoneNumber" class="required" placeholder="Please enter your phone number." /><br>
    <br>
    <label><input type="checkbox" name="subscribe" id="subscribe" value="true" checked/> Subscribe to our newsletter to get FREE weekly tips sent right to your inbox!</label><br>
    <br>

    <button id="finalSubmit" type="submit" name="save" value="final">CONTINUE</button>

  </form>

</div>

</html>
0 голосов
/ 28 апреля 2020

Вы можете выполнить проверку и отключить кнопку при нажатии события кнопки на стороне клиента.

<script type="text/javascript">

$("#finalSubmit").click(function()
  {
   //do your validation and if correct then disable the button

    $("#finalSubmit").attr("disabled", true);

    //other work if any
   }
  );
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...