Jquery form, nnlimited fields and validation on each row

Question

Hi, I have a html form, which like this:

I have 2 fields, name and email, and 2 buttons, "add row" and "submit".

When i click the "add row" button, it will create a new row with 2 new fields (name and email). I store the name and email in array: ...

Thus, user can ad unlimited rows. I want to have a validation, if the user fill in either name or email on the same row, i want the user to fill in another field, so that every row would have "name" and "email" filled.

How to validate that, if 1 of the field is filled, then the another field on the same row must be filled, in jquery??

Answer 1

First, let's assume that your rows are divs with a class="row", and the two fields also has classes as fname and femail.

Then, the script will be the following:

function oneFieldIsEmpty() 
{
    $(".row").each(function(){
        if($(this).find(".fname").val().length || $(this).find(".femail").val().length) {
            if(!$(this).find(".fname").val().length || !$(this).find(".femail").val().length) {
                return true;
            }
        }
    });
    return false;
}

Answer 2

You can use the jQuery form validation plugin since that allows you to create rules that can validate against other jQuery Selectors so you can use .nameclass + :input or .emailclass ~ :input