0

Hi i have a JavaScript validation code for a dynamically adding text boxes, it's showing alert when text boxes having empty values and not stopping there

$(document).on('click', '#med_submit', function () {
    $(".medicine_name").each(function (i) {
        var id = this.id;
        var value = $("#" + id).val();

        if (value.trim() == "") {
            alert('Medicine name should not be empty');
            return false;
        }
    });
    $(".medicine_quantity").each(function (i) {
        var id = this.id;
        var value = $("#" + id).val();

        if (value.trim() == "") {
            alert('Quantity name should not be empty');
            return false;
        }
    });
});

this is my script, in medicine_name each function there is any one medicine_name class textbox is empty then it shows alert message also it's going to the next medicine_quantity each function and show that alert too, here i am using return false after athe alert then how this happening, please help me

4
  • Each function has it's own returned value! Commented Mar 30, 2015 at 4:53
  • Show the HTML too, but I believe a return false inside the each() exits the each early, not the parent function. Commented Mar 30, 2015 at 4:54
  • but i want only one alert at a time, but its showing both Commented Mar 30, 2015 at 4:55
  • You could replace .each with a simple for loop and replace the return with a break statement then. Commented Mar 30, 2015 at 5:00

3 Answers 3

3

Just set a flag when you show an alert, and bail early if the flag is set.

$(document).on('click', '#med_submit', function() {
  var alertShown = false;

  $(".medicine_name").each(function(i) {
    var id = this.id;
    var value = $("#" + id).val();

    if (value.trim() == "") {
      alert('Medicine name should not be empty');
      alertShown = true;
      return false;
    }

  });
  if (alertShown) return;
  
  $(".medicine_quantity").each(function(i) {
    var id = this.id;
    var value = $("#" + id).val();

    if (value.trim() == "") {
      alert('Quantity name should not be empty');
      return false;
    }

  });
});

Why doesn't return false; work?

The reason it isn't enough to return false; inside the .each() callback function is that all that does is stop processing the rest of the matched elements in the jQuery set.

From the jQuery docs:

You can stop the loop from within the callback function by returning false.

In other words, all it does is make the .each() call finish sooner than it normally would.

Regardless of when it finishes, though, the next line of code to execute after the first .each() call in your code is the second .each() call. It has no knowledge of what happened with the first .each() call, so it will start with the first matched element and call the supplied function for it, and then proceed with the rest of the matched elements unless the function returns false, when it will stop.

Sign up to request clarification or add additional context in comments.

1 Comment

@askm3 I added an explanation for why it isn't enough, let me know if you are still confused.
1
var blank_found = false;
$(".medicine_name").each(function (i){
   var id=this.id;
   var value=$("#"+id).val();

   if(value.trim()==""){ 
       blank_found=true;
       alert('Medicine name should not be empty');
       return false;
    }
});

if (blank_found){
   return false;
}

$(".medicine_quantity").each(function (i){
   var id=this.id;
   var value=$("#"+id).val();

   if(value.trim()==""){
      alert('Quantity name should not be empty');
      return false;
   }
 });

Comments

1

You can use this one..

$(document).on('click','#med_submit',function(){
var isempty=false;
   $(".medicine_name").each(function (i)
                    {
                            var id=this.id;
                            var value=$("#"+id).val();

                            if(value.trim()==""){isempty=true; alert('Medicine name should not be empty'); return false;}

                    });
           $(".medicine_quantity").each(function (i)
                    {
                            var id=this.id;
                            var value=$("#"+id).val();

                            if(value.trim()==""){ isempty=true; alert('Quantity name should not be empty'); return false;}

                    });

if ( isempty==true ) {
       return false;
    }


        });

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.