AJAX 表单在 1 个错误后不再提交，应该转到下一个错误

Question

我制作了一个 AJAX 表单，但提交时没有出现下一个错误。如果我填写性别并单击提交，它不会进入下一个需要填写的必填字段错误。

//submit account and password register second part (account)
$(document).ready(function(){ $("#register_second_part").on("submit", function(e){
  console.log("TEST1");
     e.preventDefault();
     var token = $("#g-recaptcha-response").val();
     var gender = $(".gender:checked").val();
     var firstname = $('#name').val();
     var lastname = $('#lastname').val();
     var country = $(".countrySelect").find("option:selected").text();
     var streetname = $('#streetname').val();
     var streetnumber = $('#streetnumber').val();
     var zipcode = $('#zipcode').val();
     var city = $('#city').val();
     var date = $('#date').val();
     var phone = $('#phone').val();
     var email = $('#second-email').val();
    var password = $('#passwordForRegistration').val();

     $.ajax({
       url: "register_account_and_password_ajax.php",
       type: "POST",
       data: { email: email,new_password: password,gender:gender,name:firstname,lastname:lastname,country:country,
              streetname:streetname,streetnumber:streetnumber,zipcode:zipcode,city:city,date:date,phone:phone,recaptcha:token},
              dataType: 'json',
       success: function (data) {

         if(data.type == 'success') {
             console.log("TEST2");
           $('#registerSpamMessage').modal();
           $('#registerSpamMessage').on('hidden.bs.modal', function () {
             $('#submitAccountRegister').html(
        "<span class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span> Laden..."
          );
             window.location='products.php';
          });
         } else if(data.type == 'error') {
             console.log("TEST3");
           $("#message2").html("<div class='alert alert-danger resizeFont' style='text-align:center;'>"+data.text+"</div>");
           // grecaptcha.reset();
           $(window).scrollTop(0);
         }
       }
     });

   });
 });

按钮是这样的：

<button id="submitAccountRegister" type="submit">Click</button>

我不明白它怎么没有进入下一个需要填写的必填字段。它在第一个错误后停止提交。

    //See if gender is chosen
                            if (!isset($_POST['gender']))  {
                                array_push($errors, "");
                                $output = json_encode(array('type' => 'error', 'text' => "Choose your gender please"));
                                die($output);
                            }

                            //see if country is chosen
                            if($_POST["country"] == 'Select Country'){
                                array_push($errors, "");
                                $output = json_encode(array('type' => 'error', 'text' => "Choose your country please"));
                                die($output);
                            }

                            if (empty($_POST['name']) || empty($_POST['lastname']) || empty($_POST['streetname']) || empty($_POST['streetnumber'])
                                    || empty($_POST['city']) || empty($email) ||
                                    empty($_POST['new_password'])) {
                                        array_push($errors, "");
                                        $output = json_encode(array('type' => 'error', 'text' => "All fields are required to fill in except your Birth date, Zip code or phone number"));
                                        die($output);
                            }

                            if ( strlen($_POST['name']) > 80 || strlen($_POST['lastname']) > 80 || strlen($_POST['streetname']) > 80 || strlen($_POST['city']) > 80 ||
                                     strlen($_POST['new_password'] ) > 80) {
                                        array_push($errors, "");
                                        $output = json_encode(array('type' => 'error', 'text' => "For fields: Firstname, Lastname, Streetname, City and Password are a max of 80 characters allowed"));
                                        die($output);
                                    }

                                    if(strlen($_POST['streetnumber']) > 15) {
                                        array_push($errors, "");
                                        $output = json_encode(array('type' => 'error', 'text' => "For field Streetnumber is a max of 15 characters allowed"));
                                        die($output);
                                    }


                                    if(strlen($email) > 250) {
                                        array_push($errors, "");
                                        $output = json_encode(array('type' => 'error', 'text' => "For field Email is a max of 250 characters allowed"));
                                        die($output);
                                    }

                                    if($_POST['date'] && strlen($_POST['date']) > 10) {
                                        array_push($errors, "");
                                        $output = json_encode(array('type' => 'error', 'text' => "For field Birthdate is a max of 10 characters allowed"));
                                        die($output);
                                    }

部分PHP代码是这样写的。

我在这里做错了什么吗？我希望有人能解释并帮助我。就好像在第一个错误弹出后它就被冻结了。

Answer 1

我注意到我的验证码破坏了 HTML 中的必填字段。这是为什么？

          $("button#submitAccountRegister").each(function () {
              var el = $(this);
              grecaptcha.render($(el).attr("id"), {
                  "sitekey": 'SITE_KEY',
                  "size": "invisible",
                  "badge": "bottomright",
                  "callback": function (token) {
                    $('form#register_second_part').submit();
                  }
              });
          });