Question

我创建了一个表格，用于AJAX搜索汽车注册并将信息返回到表格中。

然后将添加带有文本框的新行。每个文本框都有一个唯一的名称＆amp; id例如[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");
                }
            });
        }
    }); 
});

这是完整的代码。

我已经尝试了标准.valid()，但是它提供了css但仍然处理按钮点击，还有一个空字段但我正在努力使这个工作与唯一生成的id

Answer 1

我没有看到任何代码，我没有正确理解你的问题，但可能是你的验证代码是在发送ajax请求之前加载的页面中的document.ready事件中吗？

尝试将验证代码放入函数中，并在ajax请求成功时运行该函数。

Answer 2

如果我清楚地理解你的意思（由于缺乏信息，我可以说它有点困难;-)），作为AJAX调用创建一个新文本框，生成名称/ id。此文本框充当用户的容器，可以输入您需要再次验证一组预定义规则的内容

您必须记住，在您在表单上应用validate方法时，您的新手复选框不属于DOM。然后验证插件

是未知的

请检查验证插件的dynamic form demo并研究代码，尤其是以delegate

开头的部分

Jquery使用生成的id进行验证

2 个答案: