程序员经验分享-hwhale

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

validation

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

  • 如何在 drop 事件 jquery 上获取已删除项目的 id

    当我将某些东西放到 jquery droppable 时 我想获取删除的项目的 id 当我这样做时 here droppable tolerance fit accept one drop function id this attr id

  • 使用 jQuery 选择具有数据属性的元素为其父元素分配一个 null ID

    这确实很奇怪 如果我使用 jQuery find 在滚动事件期间查找具有数据属性的子元素 然后滚动页面将重复添加和删除 IDparents这些元素 这很难描述 但这里有一个可重现的测试用例 http jsfiddle net 8fouvx9

  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you

  • 如何在bootstrap中默认隐藏侧边栏？

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst

  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo

  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一

  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分

  • 如何取消 AjaxForm 上的提交

    我正在使用 jQuery 插件 ajax 形式 我尝试实现这样的东西 MyFormID ajaxForm dataType json resetForm true beforeSubmit function validateData ret

  • 弹出窗口的动态高度取决于内容，可能吗？

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques

  • 在一个项目中使用多个 Javascript 框架？

    在一个项目中使用多个框架是好是坏 还是不好 因为它会变得混乱 一团糟 并且加载时间可能会更长 100 K 真的很重要吗 或者你应该坚持使用一个 通常最好选择一件事并坚持下去 原因有很多 更少的依赖 降低复杂性 更容易维护 更快的加载时间 不

  • jQuery Find() 和 XML 在 IE 中不起作用

    我正在尝试使用 jQuery 来解析内存中的 XML 文档 除了 IE 之外 这在所有东西上都很有效 令人震惊 一些谷歌搜索显示 问题很可能是由于 IE 将我的文档视为 HTML 而不是 XML MIME 类型 有没有办法让我的 jQuer

  • 在画布上绘制多个矩形

    我试图在鼠标移动时在画布上添加多个矩形 但是当我在图像上绘制矩形时 画布上的背面图像也会被清除 我不想删除它 我想要画布上有多个矩形而不清除画布图像 请检查下面的 JavaScript 代码 var canvas document getE

  • 对一组复选框使用 HTML5“必需”属性？

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要

  • RegisterForEventValidation 只能在 Render 期间调用

    我有一个将从 jquery ajax 调用的 webmethod WebMethod public string TestMethod string param1 string param2 StringBuilder b new Stri

  • 仅当表单已提交时才触发 jQuery 表单验证？

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交

  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4

  • jQuery，REAL：不是等价的运算符？

    此代码行选择任何类名不是 id 和 quantity 的 div 内的所有子输入 div item gt div not id quantity gt input live keydown function event 执行相反操作的代码行

  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素？

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有

  • 未捕获的错误：找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http

  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到

随机推荐

热门标签