Question

The function below works as it should. It’s to validate a form. In short, I have a couple input fields. If I hit submit and no text has been entered in either input, the validation errors appear. If I fill in one field, only one of the fields will update. But if I hit “submit” again, even without filling in the second form input, the else{} gets fired, not the if{} that should assure it’s filled out, etc.

Not familiar, but is it a return false; issue?

if ($('input[type="text"]:visible').val().length == 0) {
    $('.submitModal').click(function () {
        $('.modal').modal('show'); 
    });
}
else {
    $('.submitModal').click(function () {
        $('.modal').modal('hide'); 
    });
}

Any idea what Im doing wrong?

Answer 1

This is backwards thinking. Bind the click, period. Not conditionally. On click, decide what you want to happen (even if this just means ignoring the click).

If you do bind a click, filling out the form differently isn’t going to unbind it. And even though you COULD actually unbind it, there’s no great reason to.

If .submitModal is actually a submit input element (rather than an anchor or button with that class), instead of binding a click listener, bind a submit listener.

Based on Mike’s own starting point of code, here’s an example (slightly outside the true context, since I don’t have the modal function available without unecessary effort!)

$('.submitModal').click(function (e) {
    e.preventDefault();
    $('input[type="text"]:visible').each(function() {
        if ($(this).val().length == 0) {                        
            $('.modal').show();                        
        }
        else {
            $('.modal').hide();
        }
    });
});​

The first thing that’s different is that I pass the event into the click handler, and then preventDefault on it. That prevents the anchor from causing a page refresh.

But the only other thing I did is swap out the actual .modal() call for a generic jQuery .show() and .hide() just to proof-of-concept the logic.

Mike, the sample code you wrote was pretty much bang-on (except the preventDefault assuming you do in fact want to prevent default anchor behaviour). Here’s the proof:

jsfiddle.net/gnaXn/2

When all visible text fields are filled in, the “modal” hides. When they’re emptied again, the “modal” reappears.