0

I got 4 input boxes in html and I want to check if one or many of them are empty. The issue with this code is the fact that at each new submit when the check fails I receive an incremental number of alerts. Meaning, if first time validation for Value2 fails I receive 1 alert, then I insert a correct Value2 but Value3 is wrong so instead to display only one alert for Value3 I receive a bunch of 2 alerts, and so on for each new submit...

<script>
    function onSubmitNotification() {
        var checkThisOnes = ["Value1", "Value2", "Value3", "Value4"];
        $('#myform').submit(function() {
            for (i = 0; i < checkThisOnes.length; i = i + 1) {
                var checkedValue = $('#'+checkThisOnes[i]).val();
                if (checkedValue === undefined || checkedValue === "") {
                    alert("This field is empty: " + checkThisOnes[i])
                    return false
                }
            }
        });
</script>
Andrei
  • 37
  • 1
  • 6
  • How are you calling `onSubmitNotification`? Because it is *adding* an event listener every time it is called, so it you have it as, say, `onsubmit="onSubmitNotification()"`, every time you submit the form, it's adding another event listener, which would account for the multiple alerts. – Heretic Monkey May 17 '20 at 14:28
  • Yeah I call it that way. . So how can I solve it? – Andrei May 17 '20 at 14:31
  • See the answers below. Remove `onSubmitNotification` altogether. – Heretic Monkey May 17 '20 at 14:33
  • Does this answer your question? [jQuery click events firing multiple times](https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times) – Heretic Monkey May 17 '20 at 14:36

2 Answers2

1

use event.preventDefault() on submit. This will stop default submit behavior.

$('#myform').submit(function(event) {
   event.preventDefault()
   // .. rest of the code

  if(formvalid){ 
   // submit again
    $('#myform').submit()
  }
})
xdeepakv
  • 7,835
  • 2
  • 22
  • 32
  • do you mean this: `````` – Andrei May 17 '20 at 14:27
  • I have just tried it but the issue persists, I still receive an incremental nr of alerts at each new submit – Andrei May 17 '20 at 14:28
  • can u check` checkedValue.trim() == ""` may be you condition of error is wrong.. try to print in if condition. – xdeepakv May 17 '20 at 14:36
0

I don't know why you need to use onSubmitNotification() but without that also it will work .Also,remove return false and use e.preventDefault() to avoid default submission.

Demo Code :

var checkThisOnes = ["Value1", "Value2", "Value3", "Value4"];
$('#myform').on("submit",function(e) {
   var result=true; //to check
  for (i = 0; i < checkThisOnes.length; i = i + 1) {
    var checkedValue = $('#' + checkThisOnes[i]).val();
    if (checkedValue === undefined || checkedValue === "") {
      alert("This field is empty: " + checkThisOnes[i])
    result =false; //false don't submit
    }

  }
  console.log(result)
  return result; //returning true or false

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="myform">
  <input type="text" id="Value1">
  <input type="text" id="Value2">
  <input type="text" id="Value3">
  <input type="text" id="Value4">
  <button type="submit">Submit</button>
</form>
Swati
  • 28,069
  • 4
  • 21
  • 41