Uncaught RangeError: Maximum call stack size exceeded while implementing required field validation

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>

I have implemented a code to show red colored border around fields which are empty and using jquery code as seen above but it leads to loop. How can I fix it ?

The call to `$("form").submit()` inside the `.submit()` handler will recursively invoke the handler, forever (until you run out of stack). — Pointy, Jul 24 '19 at 13:22
how can I prevent that and make sure validation is working @Pointy — harshal, Jul 24 '19 at 13:24
Instead of the recursive call, use `.preventDefault()` when the fields are *not* valid, and let the "submit" event proceed when they are. — Pointy, Jul 24 '19 at 13:26
Why are you preventing default before you do the validation? Only do it if it fails — epascarello, Jul 24 '19 at 13:27
One simple way to solve this is to attach the validation event to a click on your button. You `preventDefault` event on `submitButton.click`, then if the validation is correct you trigger `form.submit`. Or you can try to just `preventDefault` on your submit if the validation fails, remove it from the first line and reposition it. — Renan Souza, Jul 24 '19 at 13:27
Also weird you are just recreating HTML 5 required attribute with CSS. Browser will disable submit for you. — epascarello, Jul 24 '19 at 13:28
@epascarello Can you provide the appropriate way to implement the required field functionality (so that it can validate using javascript or jquery without jqueryvalidation plugin) ? I am using prevent default to prevent submission. — harshal, Jul 24 '19 at 13:30
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation — epascarello, Jul 24 '19 at 13:32
@epascarello How can I validate if the email is valid in javascript ? any thoughts on that ? — harshal, Jul 24 '19 at 13:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196931/discussion-between-harshal-and-epascarello). — harshal, Jul 24 '19 at 13:36
https://stackoverflow.com/questions/19605773/html5-email-validation — epascarello, Jul 24 '19 at 13:54

score 1 · Answer 1 · answered Jul 24 '19 at 13:35

1

In order to avoid an infinite form submission your should unbind from it before submit:

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

answered Jul 24 '19 at 13:35

antonku

7,377
2
15
21

Uncaught RangeError: Maximum call stack size exceeded while implementing required field validation

1 Answers1