I have the following code in which I'm trying to iterated over html text input elements, do some validation and prevent the form submission if the validation fails:
$("#the_form").submit(function(){
$(":text", this).each(function(){
if($(this).val().length != 0)
{
var str = $(this).val();
str = $.trim($(this).val());
$(this).val(str);
if($(this).val().length < 4)
{
alert("You should enter at least 4 characters");
$(this).focus();
return false;
}
}
}) // end of each() function
return true;
})
If I remove the .each() function and do each element separately (which obviously is not a very good approach), I get the results wanted. However, if I use the code as it is, the form keeps on submitting even if the user has not entered at leas four characters. Any ideas on what I may be doing wrong here? Any help will be very appreciated. Thanks in advance.
I have the following code in which I'm trying to iterated over html text input elements, do some validation and prevent the form submission if the validation fails:
$("#the_form").submit(function(){
$(":text", this).each(function(){
if($(this).val().length != 0)
{
var str = $(this).val();
str = $.trim($(this).val());
$(this).val(str);
if($(this).val().length < 4)
{
alert("You should enter at least 4 characters");
$(this).focus();
return false;
}
}
}) // end of each() function
return true;
})
If I remove the .each() function and do each element separately (which obviously is not a very good approach), I get the results wanted. However, if I use the code as it is, the form keeps on submitting even if the user has not entered at leas four characters. Any ideas on what I may be doing wrong here? Any help will be very appreciated. Thanks in advance.
Share Improve this question asked May 23, 2011 at 3:17 user765368user765368 20.4k27 gold badges101 silver badges171 bronze badges2 Answers
Reset to default 6Your return false; is from within the callback function for $.each() (which makes it break at that iteration) and not from the submit handler (which would stop the form submission). This should do the trick:
$("#the_form").submit(function(){
var isValid = true;
$(":text", this).each(function(){
if($(this).val().length != 0)
{
var str = $(this).val();
str = $.trim($(this).val());
$(this).val(str);
if($(this).val().length < 4)
{
alert("You should enter at least 4 characters");
$(this).focus();
isValid = false;
return false;
}
}
}) // end of each() function
return isValid;
})
Simple... You just prevent the default of the event if you want it to stop. Please DO NOT RETURN FALSE. Returning false from an event is like saying: "I want you to fail. Not only that I want to make sure that any event handler registered after me does not get executed, and no bubbling happens because some shit just went wrong". You want "prevent the action the browser does normally from happening".
$("#the_form").submit(function(e) {
// LOGIC
$(this).find(":text").each(function() {
// OH NOES! We detected the form cannot be submitted.
e.preventDefault();
// More logic? maybe a shortcut exit.?
});
});
note e.preventDefault() will stop links from going to their href target, will prevent form submission, will even prevent a change handler from allowing the change (say e.preventDefault() on a checkbox.change event). See http://api.jquery./event.preventDefault/
edit: Note that the event handler is always passed the event object as a parameter, in your code you just ignored it. Read up on event handler function. There are really nifty features that you can do with events in jquery, don't ingore them as they are quite useful at times especially when you need to get some data to the handler.