Question

I have a table with several rows of data. Each row is it’s own entity. It’s not all associated to one form. Essentially each row is a form:

http://jsfiddle.net/NmpaM/

How can I use jQuery to say: for that row, if fName, lName and email are not blank, and email is valid. Enable the submit button. If not, disable the submit button?

Goal is to make sure each row is valid before allowing the user to submit. And then after submit, having control to remove the row?

Thoughts Thanks

Answer 1

Here’s how I’d do it (see jsfiddle.net/marke/mvBNS):

jQuery(function() {
    // You may want to use a different regular expression;
    // this is just the first one I found on the 'net   
    var email_regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    function validateRow(tr) {
        var valid = true;
        tr.find('input[type="text"]').each(function(i, el) {
            if (!el.value.replace(' ', '')) return valid = false;
            if (el.name == 'email' && !email_regex.test(el.value)) return valid = false;
        });
        tr.find('input[type="submit"]').attr('disabled', valid? null : 'disabled');
    }

    jQuery('tr').each(function(i, el) {
        validateRow(jQuery(this));
    }).find('input[type="text"]').change(function() {
        validateRow(jQuery(this).closest('tr'));
    });
});