jQuery使用生成的ID进行验证

分类：编程问答

如何解决jQuery使用生成的ID进行验证

| 我创建了一个表格，该表格将进行
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),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,height: 190,width: 350,buttons: {
                        \"Add Make\": function () {
                            var bValid = true;
                            allFields.removeClass(\"ui-state-error\");
                            bValid = bValid && checkLength(make,\"Make\",2000);
                            if (bValid) {
                                $(\"input[id$=\'[\" + currentID + \"].r_make\'\").val(make.val());

                                $(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\",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\"),tips = $(\".validateTips\");
                    function updateTips(t) {
                        tips.text(t).addClass(\"ui-state-highlight\");
                        setTimeout(function () {
                            tips.removeClass(\"ui-state-highlight\",1500);
                        },500);
                    }
                    function checkLength(o,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,n) {
                        if (!(regexp.test(o.val()))) {
                            o.addClass(\"ui-state-error\");
                            updateTips(n);
                            return false;
                        } else {
                            return true;
                        }
                    }
                    $(\"#model-form\").dialog({
                        autoOpen: false,buttons: {
                            \"Add Model\": function () {
                                var bValid = true;
                                allFields.removeClass(\"ui-state-error\");
                                bValid = bValid && checkLength(model,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\"),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\"),tips = $(\".validateTips\");
            function updateTips(t) {
                tips.text(t).addClass(\"ui-state-highlight\");
                setTimeout(function () {
                    tips.removeClass(\"ui-state-highlight\",1500);
                },500);
            }
            function checkLength(o,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,n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass(\"ui-state-error\");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
            $(\"#model-form\").dialog({
                autoOpen: false,buttons: {
                    \"Add Model\": function () {
                        var bValid = true;
                        allFields.removeClass(\"ui-state-error\");
                        bValid = bValid && checkLength(model,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\"),n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass(\"ui-state-error\");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
            $(\"#make-form\").dialog({
                autoOpen: false,buttons: {
                    \"Add Make\": function () {
                        var bValid = true;
                        allFields.removeClass(\"ui-state-error\");
                        bValid = bValid && checkLength(make,2000);
                        if (bValid) {
                            $(\"input[id$=\'[0].r_make\'\").val(make.val());

                            $(this).dialog(\"close\");
                        }
                    },close: function () {
                    allFields.val(\"\").removeClass(\"ui-state-error\");
                }
            });
        }
    }); 
});
这是完整的代码。 我试过标准
.valid()
，但它带有CSS，但仍处理按钮单击，也曾考虑在存在空白字段时禁用按钮，但我正在努力使此操作与唯一的生成ID一起使用     

解决方法

如果我清楚理解您的意思（由于缺乏信息，我可以说这有点困难；-)），那么将通过AJAX调用创建一个新的文本框，并生成名称/ id。该文本框充当用户的容器，用户可以输入您需要再次验证预定义规则集的内容 您必须记住，在表单上应用
validate
方法时，新来者复选框不属于DOM。然后验证插件不知道 请检查验证插件的动态表单演示并研究代码，尤其是以ѭ5开头的部分     ,我没有看到任何代码就无法正确理解您的问题，但是可能是您的验证代码在发送Ajax请求之前加载的页面的document.ready事件中？ 尝试将验证代码放入函数中，并在ajax请求成功时运行该函数。     

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot