CODEWITHSUNDEEP
javascriptjqueryformsloopssubmit
Capitano
Capitano

Reputation: 1

jQuery form validation check ending up in a loop

I'm very new if it comes to jQuery. I'm trying to make a good client-side validation for my form. (At the moment only checking if X field is not empty)

But when I submit the form I end up in a forever loop.

I can explain the problem, and I understand the 'why'. But I have no idea how to fix it.

The problem occurs because: Everytime I submit the form, he runs the validation check again, then submits when there aren't any errors, but because I submit, he checks again-- and so on.

With this code I monitor if the form is getting submitted. (And if so, let the validation begin)

 // Form validation on submitting the form
  $('form').on('submit', function() {
    var id = $(this).attr('id');
    console.log('Form is submitted');

    submitFormValidation(id);
  });

With this code I'm trying to validate every input field.

 function submitFormValidation(id) {
  event.preventDefault();

  var goodCount = 0;
  var goodCountMinimum = $('#' + id + ' .c-contact-form-item-input').length;

  $('#' + id + ' .c-contact-form-item-input').each(function () {
    if ($(this).val().length == 0) {
      $(this).parent().find('span').css('background-color', 'red');
      $(this).parent().find('span').css('width', 'calc(100% - 30px');
      $(this).parent().find('i').css('background-color', 'red');
      $(this).parent().find('i').css('animation', 'none');
      $(this).parent().find('i').css('opacity', '1');
    }
    else {
      $(this).parent().find('span').css('background-color', 'green');
      $(this).parent().find('span').css('width', 'calc(100% - 30px');
      $(this).parent().find('i').css('background-color', 'green');
      $(this).parent().find('i').css('animation', 'none');
      $(this).parent().find('i').css('opacity', '1');

      goodCount = goodCount + 1;
      return goodCount;
    }
  });

  if (goodCount == goodCountMinimum) {
    $('#' + id).submit();
  }
}

I hope someone can help me out on how to fix the never ending loop.

Thanks!

Upvotes: 0

Views: 327

Answers (2)

Unmitigated
Unmitigated

Reputation: 89412

Change

if (goodCount == goodCountMinimum) {
 $('#' + id).submit();
}

To

if (goodCount == goodCountMinimum) {
  return;
} else {
  e.preventDefault();//pass in the event object to the function
}

For this solution to work, change your function to take two parameters:

function submitFormValidation(id, e) {}

And invoke it like this: 

$('form').on('submit', function(e) {
var id = $(this).attr('id');
console.log('Form is submitted');

submitFormValidation(id, e);
});

If you submit the form (using jQuery's submit()), the jQuery submit event handler will continuously be called. Just returning will allow the default action of the form to be taken (which is submitting).

Upvotes: 1

Taplar
Taplar

Reputation: 24965

Try changing...

$('#' + id).submit();

to...

$('#' + id)[0].submit();

The difference between these two is that the first triggers a submit on the jQuery object, where the second triggers a sumbit on the raw Element. Triggering a submit on the Element, and not the jQuery object, should result in the jQuery submit event handler being skipped.

Example...

$('form').on('submit', function(e){
  console.log('submitted!');
  e.preventDefault();
  
  setTimeout(function(){
    e.target.submit();
  }, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.google.com/">
  <button>Go!</button>
</form>

Upvotes: 1

Related Questions