Jquery 使用生成的 id 进行验证

2024-01-12

我创建了一个表来执行AJAX搜索汽车登记并将信息返回到表中。

然后,这将添加一个带有文本框的新行。每个文本框都有一个唯一的名称和 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 来实现此操作


如果我清楚地理解你的意思(而且我可以说,由于缺乏信息,这有点困难;-)),一个新的文本框将作为 AJAX 调用的结果创建,并生成 name/id 。该文本框充当用户的容器,可以输入您需要再次验证一组预定义规则的内容

你必须记住,当你应用时,你的新人复选框并不是 DOM 的一部分validate表单上的方法。然后验证插件不知道它

请检查动态表单演示 http://jqueryvalidation.org/files/demo/dynamic-totals.html验证插件并研究代码,特别是开头的部分delegate

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 使用生成的 id 进行验证 的相关文章

随机推荐