Jquery Validate with generated id's

Question

I have created a table that will do an AJAX search for a car registration and return the information to a table.

this then will add a new row with textboxes. Each textbox has a unique name & id e.g. [0].r_make / [1].r_model everything is all working except when I click the button it doesn’t validate.

What happens is, it posts the next row with empty fields. I am running out of ideas on how to validate this. Some help would be appreciated.

HTML:

<form id="find_reg" action="#">   
    <div id="tabe_find" style="width:250px;">
          <span>Enter Car Registration</span>
          <table border="0" id="findtab" class="find">
          <tbody>
            <tr>
            <td >
                <input name="vehicle_reg" id="vehicle_reg" type="text" class="reg-car" value="" />
            </td>
            <td >
                <input type="button" id="btnAddVehicle" value="Find" />
            </td>
            </tr>
          </tbody>
          </table>
    </div>

    <table border="1" id="regTable" class="table4" width="500">
        <thead>
            <th class="testClass">Reg</th>
            <th class="testClass">Make</th>
            <th  class="testClass2">Model</th>
            <th  class="testClass">CC</th>
            <th class="testClass">Value</th>
            <th  class="testClass">Owner</th>
            <th  class="testClass">year</th>
            <th class="testClass">Delete</th>
        </thead>
        <tbody>
            <tr>
            <td><input id='[0].r_reg' type='text' name='[0].r_reg' class='reg'></td>
            <td><input id='[0].r_make' type='text' name='[0].r_make' class='make'></td>
            <td><input id='[0].r_model' type='text' name='[0].r_model' class='model'></td>
            <td><input id='[0].r_cc' type='text' name='[0].r_cc' class='cc'></td>
            <td><input id='[0].r_value' type='text' name='[0].r_value' value="&pound" class='value'></td>
            <td><input id='[0].r_owner' type='text' name='[0].r_owner' class='owner'></td>
            <td><input id='[0].r_year' type='text' name='[0].r_year' class='year'></td>
            <td><a href="#" class="delete">delete</a></td>
            <tr>
        </tbody>
    </table> 
</form>

Jquery:

$(function(){
    $("input[type$='text']").valid();
});
$(function () {

    $('#loading').hide()   
    .ajaxStart(function () {
                    $(this).show();
    }).ajaxStop(function () {
                    $(this).hide();
    });

    $("#make-form").hide();
    $("#model-form").hide();

    var currentID = 0;

    $("#btnAddVehicle").click(function () {
    if ($("input[type$='text']").val().length < 1) {  // if the input type has no value add message
        $('#append').html("<div id='on'><font color='red'>Please fill in all fields</div>");
    }       

    if ($("input[id$='[0].r_reg']").val().length < 1){   // if the input reg has no value then submit to it
        $("input[id$='[0].r_reg'").val($('#vehicle_reg').val());
        $.ajax({  //ajax request
            dataType: "xml",
            cache: false,
            type: "GET",
            url: 'http://localhost/Reg%20Lookup/ajax_asp.asp',
            data: $('#find_reg').serialize(),
            success: function (xml) {
                $(xml).find('VEHICLE').each(function () {
                    $("input[id$='[0].r_make'").val($(this).find('MAKE').text());
                    $("input[id$='[0].r_model'").val($(this).find('MODEL').text());
                    $("input[id$='[0].r_cc'").val($(this).find('CC').text());
                    $("input[id$='[0].r_year'").val($(this).find('MANUF_DATE').text());
                })
            },
            error: function () { // on error alert this message
                alert("lookup couldnt find your registration, Please fill in all required box's !");
            }
        })

        $(".model").click(function () {
            if ($("input[id$='[" + currentID + "].r_model'").val().length < 1) {
                $("#model-form").dialog("open");
                var model = $("#model"),
                    allFields = $([]).add(model),
                    tips = $(".validateTips");
                function updateTips(t) {
                    tips.text(t).addClass("ui-state-highlight");
                    setTimeout(function () {
                        tips.removeClass("ui-state-highlight", 1500);
                    }, 500);
                }
                function checkLength(o, n, min, max) {
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass("ui-state-error");
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    } else {
                        return true;
                    }
                }
                function checkRegexp(o, regexp, n) {
                    if (!(regexp.test(o.val()))) {
                        o.addClass("ui-state-error");
                        updateTips(n);
                        return false;
                    } else {
                        return true;
                    }
                }
                $("#model-form").dialog({
                    autoOpen: false,
                    resizable: true,
                    bgiframe: true,
                    height: 290,
                    width: 450,
                    modal: true,
                    buttons: {
                        "Add Model": function () {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");
                            bValid = bValid && checkLength(model, "Customer Notes", 1, 2000);
                            if (bValid) {
                                $("input[id$='[" + currentID + "].r_model'").val(model.val());
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        allFields.val("").removeClass("ui-state-error");
                    }
                });
            }
        });

        $(".make").click(function () {
            if ($("input[id$='[" + currentID + "].r_make'").val().length < 1) {
                $("#make-form").dialog("open");
                var make = $("#make"),
                    allFields = $([]).add(make),
                    tips = $(".validateTips");
                function updateTips(t) {
                    tips.text(t).addClass("ui-state-highlight");
                    setTimeout(function () {
                        tips.removeClass("ui-state-highlight", 1500);
                    }, 500);
                }
                function checkLength(o, n, min, max) {
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass("ui-state-error");
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    } else {
                        return true;
                    }
                }
                function checkRegexp(o, regexp, n) {
                    if (!(regexp.test(o.val()))) {
                        o.addClass("ui-state-error");
                        updateTips(n);
                        return false;
                    } else {
                        return true;
                    }
                }
                $("#make-form").dialog({
                    autoOpen: false,
                    resizable: false,
                    bgiframe: true,
                    height: 190,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Add Make": function () {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");
                            bValid = bValid && checkLength(make, "Make", 1, 2000);
                            if (bValid) {
                                $("input[id$='[" + currentID + "].r_make'").val(make.val());

                                $(this).dialog("close");
                            }
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        allFields.val("").removeClass("ui-state-error");
                    }
                });
            }
        });
    }      
    else {
        if ($("input[id$='[0].r_reg']").val().length >1) // if the input "reg" has a value then add the row
        {

            $("input[id$='[" + currentID + "].r_reg'").attr("disabled", "disabled");
            $("input[id$='[" + currentID + "].r_make'").attr("disabled", "disabled");
            $("input[id$='[" + currentID + "].r_model'").attr("disabled", "disabled");
            $("input[id$='[" + currentID + "].r_cc'").attr("disabled", "disabled");
            $("input[id$='[" + currentID + "].r_value'").attr("disabled", "disabled");
            $("input[id$='[" + currentID + "].r_owner'").attr("disabled", "disabled");
            $("input[id$='[" + currentID + "].r_year'").attr("disabled", "disabled");

            $('#append').html('<div id="on">If box is empty, please click on and select relivent vehicle information.</div>')
currentID++;            
            var htmlToAppend = "<tr id='[" + currentID + "].r'><td><input id='[" + currentID + "].r_reg' type='text' name='[" + currentID + "].r_reg'  ></td>";
            htmlToAppend += "<td><input id='[" + currentID + "].r_make' type='text' name='[" + currentID + "].r_make' class='make'  ></td>";
            htmlToAppend += "<td><input id='[" + currentID + "].r_model' type='text' name='[" + currentID + "].r_model' class='model' ></td>";
            htmlToAppend += "<td><input id='[" + currentID + "].r_cc' type='text'  name='[" + currentID + "].r_cc' class='cc-car' ></td>";
            htmlToAppend += "<td width='200'><input id='[" + currentID + "].r_value' value='&pound;' type='text' name='[" + currentID + "].r_value' class='caluecar' ></td>";
            htmlToAppend += "<td><input id='[" + currentID + "].r_owner' type='text' name='[" + currentID + "].r_owner' class='ownercar' ></td>";
            htmlToAppend += "<td><input id='[" + currentID + "].r_year' type='text' name='[" + currentID + "].r_year' class='year-car' ></td>";
            htmlToAppend += "<td><a href='javascript:void(0);' class='delete' >Delete</a></td></tr>";
            $("#regTable").prepend(htmlToAppend);
            $("#regTable tr:eq(1)").css('background-color', '#990000')
            $("#regTable tr:eq(2)").css('background-color', '#cccccc')
            $("input[id$='[" + currentID + "].r_reg'").val($('#vehicle_reg').val());
            $.ajax({
                dataType: "xml",
                cache: false,
                type: "GET",
                url: 'http://localhost/Reg%20Lookup/ajax_asp.asp',
                data: $('#find_reg').serialize(),
                success: function (xml) {
                    $(xml).find('VEHICLE').each(function () {
                        $("input[id$='[" + currentID + "].r_make'").val($(this).find('MAKE').text());
                        $("input[id$='[" + currentID + "].r_model'").val($(this).find('MODEL').text());
                        $("input[id$='[" + currentID + "].r_cc'").val($(this).find('CC').text());
                        $("input[id$='[" + currentID + "].r_year'").val($(this).find('MANUF_DATE').text());
                    })
                },
                error: function () {
                    alert("lookup couldnt find your registration, Please fill in all required box's !");
                }
            });

            $(".model").click(function () {
                if ($("input[id$='[" + currentID + "].r_model'").val().length < 1) {
                    $("#model-form").dialog("open");
                    var model = $("#model"),
                        allFields = $([]).add(model),
                        tips = $(".validateTips");
                    function updateTips(t) {
                        tips.text(t).addClass("ui-state-highlight");
                        setTimeout(function () {
                            tips.removeClass("ui-state-highlight", 1500);
                        }, 500);
                    }
                    function checkLength(o, n, min, max) {
                        if (o.val().length > max || o.val().length < min) {
                            o.addClass("ui-state-error");
                            updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                            return false;
                        } else {
                            return true;
                        }
                    }
                    function checkRegexp(o, regexp, n) {
                        if (!(regexp.test(o.val()))) {
                            o.addClass("ui-state-error");
                            updateTips(n);
                            return false;
                        } else {
                            return true;
                        }
                    }
                    $("#model-form").dialog({
                        autoOpen: false,
                        resizable: true,
                        bgiframe: true,
                        height: 290,
                        width: 450,
                        modal: true,
                        buttons: {
                            "Add Model": function () {
                                var bValid = true;
                                allFields.removeClass("ui-state-error");
                                bValid = bValid && checkLength(model, "Customer Notes", 1, 2000);
                                if (bValid) {
                                    $("input[id$='[" + currentID + "].r_model'").val(model.val());
                                    $(this).dialog("close");
                                }
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function () {
                            allFields.val("").removeClass("ui-state-error");
                        }
                    });
                }
            });

        $(".make").click(function () {
            if ($("input[id$='[" + currentID + "].r_make'").val().length < 1) {
                $("#make-form").dialog("open");
                var make = $("#make"),
                    allFields = $([]).add(make),
                    tips = $(".validateTips");
                function updateTips(t) {
                    tips.text(t).addClass("ui-state-highlight");
                    setTimeout(function () {
                        tips.removeClass("ui-state-highlight", 1500);
                    }, 500);
                }
                function checkLength(o, n, min, max) {
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass("ui-state-error");
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    } else {
                        return true;
                    }
                }
                function checkRegexp(o, regexp, n) {
                    if (!(regexp.test(o.val()))) {
                        o.addClass("ui-state-error");
                        updateTips(n);
                        return false;
                    } else {
                        return true;
                    }
                }
                $("#make-form").dialog({
                    autoOpen: false,
                    resizable: false,
                    bgiframe: true,
                    height: 190,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Add Make": function () {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");
                            bValid = bValid && checkLength(make, "Make", 1, 2000);
                            if (bValid) {
                                $("input[id$='[" + currentID + "].r_make'").val(make.val());

                                $(this).dialog("close");
                            }
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        allFields.val("").removeClass("ui-state-error");
                    }
                });
            }
        });

           $(function () {
                $("tr td .delete").live("click", function () {
                    if ( !! confirm("Delete?")) {
                        $(this).parent().parent().remove();
                        return false;
                    } else {
                        ($(this).close())
                    }
                });
            })
        }   

    }
    });
});


$(function () {
    $("input[id$='[0].r_model'").click(function () {
        if ($("input[id$='[0].r_model'").val().length < 1) {
            $("#model-form").dialog("open");
            var model = $("#model"),
                allFields = $([]).add(model),
                tips = $(".validateTips");
            function updateTips(t) {
                tips.text(t).addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }
            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }
            function checkRegexp(o, regexp, n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass("ui-state-error");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
            $("#model-form").dialog({
                autoOpen: false,
                resizable: true,
                bgiframe: true,
                height: 290,
                width: 450,
                modal: true,
                buttons: {
                    "Add Model": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        bValid = bValid && checkLength(model, "Customer Notes", 1, 2000);
                        if (bValid) {
                            $("input[id$='[0].r_model'").val(model.val());
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });
        }
    });
});

$(function () { 
    $("input[id$='[0].r_make'").click(function () {
        if ($("input[id$='[0].r_make'").val().length < 1) {
            $("#make-form").dialog("open");
            var make = $("#make"),
                allFields = $([]).add(make),
                tips = $(".validateTips");
            function updateTips(t) {
                tips.text(t).addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }
            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }
            function checkRegexp(o, regexp, n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass("ui-state-error");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
            $("#make-form").dialog({
                autoOpen: false,
                resizable: false,
                bgiframe: true,
                height: 190,
                width: 350,
                modal: true,
                buttons: {
                    "Add Make": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        bValid = bValid && checkLength(make, "Make", 1, 2000);
                        if (bValid) {
                            $("input[id$='[0].r_make'").val(make.val());

                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });
        }
    }); 
});

This is the full code.

I have tried standard .valid() but it comes up with the css but still processes the button click, have also looked into disableing the button when there is an empty field but i am struggling getting this working with the unique generated id's

Answer 1

If I understand clearly what you mean (and I can tell it's a bit hard due to lack of information ;-) ), a new textbox is created as a result as an AJAX call, with generated name/id . This textbox serve as a container for the user which can input something that you need to validate again a predefined set of rules

You have to remember that your newcomer checkbox wasn't part of the DOM at the time you applied the validate method on your form. It's then unknown to the validation plugin

Please check the dynamic form demo of the validation plugin and study the code, especially the part which begins with delegate

Answer 2

I dont understand your problem correctly without seeing any code, but could it be that your validation code is in an document.ready event in the page thats loaded before the ajax request is sent?

Try to put your validation code into a function and run that function when your ajax request succeeds.