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
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.
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;
}
});
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;
}
});
Related
I try to use loop to validate each of every input whether they are filled or not. But end up my submit_form function doesn't get triggered.
$('#submit').click(function(){
var hold = true;
if ($('.tab2').hasClass('active') && hold == true) {
$('.tab-content:visible input').each(function(i, val) {
if ($(this).val() == '') {
alert("Please fill in valid " + $(this).attr('data-error'));
$(this).focus();
hold = true;
return false;
} else {
hold = false;
}
});
return false; //can't remove this
}
submit_form(); //not triggered although all inputs are filled
})
if I removed the return false, there will be no checking..
i have this code below when the select changes it works great and check for the correct condition but then for the second time if i change the select both conditions run after each other
$('#x_Statususer').on('change', function () {
var chng = !this.options[this.selectedIndex].defaultSelected;
if (chng) {
alert("has changed");
var celm=$( this ).val();
if (celm== "Revision") {
$("#btnAction").click(function() {
var r = confirm("Are you sure you want to set to Revision! ");
if (r == false) {
return false;
}
});
}
else if (celm == "Canceled") {
$("#btnAction").click(function() {
var r = confirm("Are you sure you want to set to Cancel! ");
if (r == false) {
return false;
}
});
}
} else {}
});
The problem is that you rebind the click event to #btnAction at each change. Try to change:
$("#btnAction").click(function() {...});
To:
$("#btnAction").one(function() {...});
I want to check if any element in a class meets certain conditions.
Example.
$(document).on('click','.modalInner_form_nav', function(){
var input = $(this).parents('.modalInner_form').find('.validate_g');
//$(input).each(function(index, element) {
if ($(input).val() == ''){
$(input).css('border', '#BB0000 1px solid');
return false;
}
else {
/////////go to next///////////
if ($(this).parents('.modalInner_form').is(':last-child')){
}
else {
$(this).parents('.modalInner_form').slideUp();
$(this).parents('.modalInner_form').next('.modalInner_form').slideDown();
}
////////////
}
});
This returns false if all input fields are empty, but if one in this class is not empty, it returns true.
The problem is you have a inner function so
$(document).on('click', '.modalInner_form_nav', function () {
var $form = $(this).parents('.modalInner_form');
var $input = $form.find('.validate_g');
var valid = true;
$input.each(function (index, element) {
var $this = $(this)
if ($this.val() == '') {
valid = false;
$this.css('border', '#BB0000 1px solid');
}
});
if (valid) {
if ($form.is(':last-child')) {
//do something else
} else {
$form.slideUp();
$form.next('.modalInner_form').slideDown();
}
}
});
Not really sure what your question is, but here is a way to improve your code.
Save $(this).parents('.modalInner_form') in a variable instead of constantly repeating this same line of code. Then you can replace all those method calls with the variable and just call whatever functions you want on the variable.
var varName = $(this).parents('.modalInner_form');
varName.find('.validate_g');
...
if(varName.is(':last-child')){
...
I am trying to return false after a conditional statement fail.
I have
$('#btn').click(function() {
$('.title').each(function() {
if (id == $(this).attr('id')) {
alert('The name already exists.')
return false; //I hope my codes would stop here if condition is true
}
})
// my codes still call the doSomething function even if the conditional
//statement is true
doSomething();
})
I want do call the doSomething function ONLY if id != $(this).attr('id).
The codes below gave me what I want but it seems ugly.
$('#btn').click(function() {
var nameExist = false
$('.title').each(function() {
if (id == $(this).attr('id')) {
alert('The name already exists.')
nameExist = true;
return false; //I hope my codes would stop here if condition is true
}
})
if (!nameExist) {
doSomething();
}
})
Anyone has a better approach for this? Thanks a lot!
Switch to a basic for loop.
$('#btn').click(function() {
var elements = $(".title");
for (var i = 0; i < elements.length; i++) {
if (id == elements[i].id) {
alert('The name already exists.')
return false; //I hope my codes would stop here if condition is true
}
}
doSomething();
})
You don't need to iterate thrue the elements, you can get it by the id and class like, #myId.myClass.
$('#btn').click(function() {
if($('#' + id + '.title').length) {
alert('The name already exists.');
} else {
doSomething();
}
});
If you don't mind not exiting the loop early, you can use jQuery filter
$('#btn').click(function(){
var itensWithSameName = $('.title').filter(function(){
return id == $(this).attr('id');
})
if(itensWithSameName.size() > 0)
alert('The name already exists.');
});
I think what you have is fine, but this avoids the extra conditional:
var func = doSomething;
...
if (id == $(this).attr('id')) {
func = $.noop;
...
func();
I have many forms generated dynamically via PHP. I'm trying to verify that all the fields on the one form that's going to be submitted are filled. I'm just starting to JQuery, so I'm sorry if the answer is stupidly easy.
I tried this:
$('.myform').submit(function(){
var flag = true;
$('.myform input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
But when in the second form, it goes and checks the first one (which should be empty because you're not filling that one...)
Thanks in advance!
$('.myform').submit(function(){
var flag = true;
// use $(this) below which is the form has submit event fired.
$(this).find('input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
Or you could simplify your code by:
$('.myform').submit(function() {
return $(this).find('input').filter(function() {
return $.trim($(this).val()) !== '';
}).length == 0;
});