jquery - 未捕获的 RangeError：在实现所需的字段验证时超出了最大调用堆栈大小

Question

$(document).ready(function(){
  $("form").submit(function(e) {
    e.preventDefault();
    var empty_count = 0;
    $('.required').each(function() {
      if ($(this).val() === '') {
        empty_count++;
        console.log($(this).val());
        $(this).addClass('error');
      }
      else {
        $(this).removeClass('error');
      }
    });
    console.log(empty_count);
    if (!empty_count) {
      $("form").submit();
    }
  });
});

.error {
           border-width:2px;
           border-color:red;
         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
   <h2>User Registration</h2>
   <form id='user-register' action='/user-register.php' method='post' enctype="multipart/form-data">
     <input  type='text' name='first_name' class="required" placeholder=''/><br><br>
     <input  type='text' name='last_name'  class="required" placeholder=''/><br><br>
     <input  type='email' name='email' class="required" placeholder=''/><br><br>
     <label>Profile Photo<br></label>
     <input  type="file"
       id="user_profile_photo" name="user_profile_photo"
       accept="image/png, image/jpeg, image/jpg"><br><br>
     <!-- <input  type='submit' name='file_submit'/><br><br> -->

     <input  class="required" type='password' name='password' placeholder='*****'/><br><br>

     <input  class="required" type='password' name='confirm_password' placeholder='*****'/><br><br>
     <input  type='submit' name='register'/><br><br>
   </form>
 </div>
       

我已经实现了一个代码来在空的字段周围显示红色边框，并使用如上所示的 jquery 代码，但它会导致循环。我该如何解决？

标签： jquery

Answer 1

为了避免无限的表单提交，您应该unbind从它之前submit：

if (!empty_count) {
  $("form").unbind().submit();
}