Проверка JQuery с созданными идентификаторами

Question

Я создал таблицу, которая будет AJAX искать регистрацию автомобиля и возвращать информацию в таблицу.

, тогда добавится новая строка с текстовыми полями.Каждое текстовое поле имеет уникальное имя и идентификатор, например, [0] .r_make / [1] .r_model, все работает, кроме того, что когда я нажимаю кнопку, проверка не выполняется.

Что происходит, он отправляет следующую строку с пустыми полями.У меня заканчиваются идеи о том, как это подтвердить.Хотелось бы получить некоторую помощь.

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");
                }
            });
        }
    }); 
});

Это полныйcode.

Я пробовал стандарт .valid(), но он подходит к css, но все еще обрабатывает нажатие кнопки, также изучал возможность отключения кнопки, когда есть пустое поле, но я изо всех сил пытаюсь заставить это работать суникальный сгенерированный идентификатор

Answer 1

Если я ясно понимаю, что вы имеете в виду (и могу сказать, что это немного сложно из-за недостатка информации ;-)), в результате создается новое текстовое поле в виде вызова AJAX с генерируемым именем / идентификатором.Это текстовое поле служит контейнером для пользователя, который может вводить что-то, что вам нужно для повторной проверки предопределенного набора правил

Вы должны помнить, что ваш флажок для новичка не был частью DOM во время примененияvalidate метод в вашей форме.Тогда это неизвестно плагину проверки

Пожалуйста, проверьте демонстрационную форму динамической формы модуля проверки и изучите код, особенно ту часть, которая начинается с delegate

Answer 2

Я не правильно понимаю вашу проблему, не видя никакого кода, но может ли быть так, что ваш код проверки находится в событии document.ready на странице, которая загружается перед отправкой запроса ajax?свой код проверки в функцию и запустите эту функцию, когда ваш ajax-запрос будет успешным.