javascript - 由 javascript 生成时所需的输入属性不起作用-6ren

javascript - 由 javascript 生成时所需的输入属性不起作用

转载作者：行者123 更新时间：2023-11-27 22:38:22

Input required 属性直接写在 Body 上时才起作用。生成新行时，检查时显示所需属性，但不适用于下一行元素。我正在尝试说明这个场景。

对于下图，必填字段正在工作 Required field Working only for the first Row

但是当我按下“添加”按钮时，“下一行元素必需属性”不起作用，如下所示: For Next Any other Rows Element Required Attribute is not Working

以下是我的代码。

    <!DOCTYPE html>
<html>
<head>
	<title>Test by JavaScript</title>
	<link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
</head>
<form id="testForm" name="testForm" method="post" action="" autocomplete="off" enctype="multipart/form-data" data-toggle="validator" role="form">
                <table id="testDataTable" class="table">
                  <thead>
                    <tr>
                      <th><div class="form-group">Y/N</div></th>
                      <th><div class="form-group">Name</div></th>
                      <th><div class="form-group">No</div></th>
                      <th><div class="form-group">Value</div></th>
                    </tr>
                  </thead>
                  <tbody id="testTbody">
                    <tr>
                      <td><div class="form-group"><INPUT type="checkbox" id="t_chk" name="t_chk" /></div></td>
                      <td><div class="form-group"><input type="text" class="form-control" id="t_NameTxt" name="t_NameTxt[]" required /></div></td>
                      <td><div class="form-group"><input type="text" class="form-control" id="t_IDTxt" name="t_IDTxt[]" required /></div></td>
                      <td><div class="form-group"><input type="text" class="form-control" id="t_ApxValTxt" name="t_ApxValTxt[]" required /></div></td>
                    </tr>
                  </tbody>
                </table>
                <div id="testBtnBlk" class="col-md-10">
                  <div class="form-group">
                    <input type="button" value="Add" class="btn btn-warning" onclick="addRowTest('testDataTable')"/>
                    <input type="button" id="delRow" class="btn btn-danger" value="Delete"/>
                  </div>
                </div>
                <script type="text/javascript">
                  function addRowTest(tableID) {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;
                    var row = table.insertRow(rowCount);
                    var newcell = '<tr><td><div class="form-group"><INPUT type="checkbox" id="t_chk'+rowCount+'" name="t_chk"/></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_NameTxt'+rowCount+'" name="t_NameTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_IDTxt'+rowCount+'" name="t_IDTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_ApxValTxt'+rowCount+'" name="t_ApxValTxt[]" required /></div></td></tr>';
                    table.rows[rowCount].innerHTML = newcell;
                  }
                  $(document).ready(function () {
                    $("#delRow").on("click", function () {
                      if($('#testTbody').children('tr').length>1){
                        $('table tr').has('input[name="t_chk"]:checked').remove()
                    }
                    })
                  });
                </script>
                </form>
</body>
</html>

任何人都可以帮助解决我的超文本中的错误吗？

最佳答案

添加新行后，您需要重新初始化插件。这与 HTML5 required 属性无关。

刚刚检查 DOC ，您需要在添加函数的底部使用:

$('#testForm').validator('update');

<!DOCTYPE html>
<html>

<head>
  <title>Test by JavaScript</title>
  <link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
</head>
<form id="testForm" name="testForm" method="post" action="" autocomplete="off" enctype="multipart/form-data" data-toggle="validator" role="form">
  <table id="testDataTable" class="table">
    <thead>
      <tr>
        <th>
          <div class="form-group">Y/N</div>
        </th>
        <th>
          <div class="form-group">Name</div>
        </th>
        <th>
          <div class="form-group">No</div>
        </th>
        <th>
          <div class="form-group">Value</div>
        </th>
      </tr>
    </thead>
    <tbody id="testTbody">
      <tr>
        <td>
          <div class="form-group">
            <INPUT type="checkbox" id="t_chk" name="t_chk" />
          </div>
        </td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" id="t_NameTxt" name="t_NameTxt[]" required />
          </div>
        </td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" id="t_IDTxt" name="t_IDTxt[]" required />
          </div>
        </td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" id="t_ApxValTxt" name="t_ApxValTxt[]" required />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div id="testBtnBlk" class="col-md-10">
    <div class="form-group">
      <input type="button" value="Add" class="btn btn-warning" onclick="addRowTest('testDataTable')" />
      <input type="button" id="delRow" class="btn btn-danger" value="Delete" />
    </div>
  </div>
  <script type="text/javascript">
    function addRowTest(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
      var newcell = '<tr><td><div class="form-group"><INPUT type="checkbox" id="t_chk' + rowCount + '" name="t_chk"/></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_NameTxt' + rowCount + '" name="t_NameTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_IDTxt' + rowCount + '" name="t_IDTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_ApxValTxt' + rowCount + '" name="t_ApxValTxt[]" required /></div></td></tr>';
      table.rows[rowCount].innerHTML = newcell;
      $('#testForm').validator('update');
    }
    $(document).ready(function() {
      $("#delRow").on("click", function() {
        if ($('#testTbody').children('tr').length > 1) {
          $('table tr').has('input[name="t_chk"]:checked').remove()
        }
      })
    });
  </script>
</form>
</body>

</html>

关于javascript - 由 javascript 生成时所需的输入属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38930257/

文章推荐： javascript:使用赋值语句，其中条件表达式通常是

文章推荐： javascript - 隐藏部分表格

文章推荐： javascript - 用 gulp 替换变量

文章推荐： html - 如何让 2 个相邻 block 不显示 :inline-block?

java - 所需 bundle 的状态已解决而不是 Activity
我有一个依赖于包 B 的包 A。当包 A 中的代码运行并访问包 B 中的类时，包 B 的状态将被解析 (4)，而不是 Activity (32) 和包 B 的激活器也没跑好。我认为 bundle B
html - 所需 CSS 中的像素宽度比我预期的长 10px。为什么？
这个问题在这里已经有了答案: How to remove the space between inline/inline-block elements? (41 个回答) 关闭 7 年前。
java - native 库，Java OpenAL 所需
我正在尝试使用 Java OpenAL 库。我在导入名为 libsoft_oal.so 的 native 库时遇到问题。 Java OpenAL 依赖于 OpenAL 软实现。我尝试根据他们在 git
ruby - 所需 ruby 文件的 Sidekiq 错误
我正在尝试启动我的应用程序。是一个 unicorn +工头+sinatra的应用。这是我的 config.ru 文件: require "rubygems" require "sinatra" Bu
javascript - 仅获取所有选项中间值，使用 jquery 选择(所需)类
我有一个下拉列表，其中包含一些从数据库表中检索的值，我想要的是当单击按钮时它应该只获得选项标签的中间值，但只有那些类名为“get_this”的选项标签并离开那些选项，如果他们没有这个类预期输出:值
php - 所需 php 中的 Javascript 文件不起作用，但直接在文件中可以
我有一个index.php文件，需要一个通用的head.php文件，head.php文件中有几个Javascript文件，当这样尝试时，代码在源代码中看起来很好，但文件却不是实际上对文档做任何事情。
android insmod init_module 失败(所需 key 不可用)
有人能帮帮我吗？我已经像这样运行了 imsmod: $ insmod /data/mm/mmdev.ko epoll_rate=100 但是我得到一个错误: insmod: init_module
php - 在 Notepad++ 中打开 PHP 所需/包含文件的快速方法
是否有键盘快捷键或插件可以在 Notepad++ 中打开 PHP 所需或包含的文件？我知道，在 Dreamweaver 中，执行此操作的命令是 Ctrl+D，但我似乎无法在 Notepad++ 中找到
javascript - 显示/隐藏点击 div，所需 : one item displayed at a time
我已经用 js 设置了一个显示/隐藏 div，但我很难弄清楚如何一次显示一个 div。目前发生的情况是，除非我再次单击原始链接来关闭该 div，否则每个 div 都会显示。 http://www.li
elasticsearch - 属性:[机架]上的节点上的碎片太多，每个属性:[1]所需，节点数:[2]，剩余的:[0]
当我尝试将未分配的辅助分片分配给节点时出现错误。 { "error": { "root_cause": [ { "type": "remote_transpor
c++ -/usr/bin/ld : warning: abc. 所以，找不到 xyz.so 所需(尝试使用 -rpath 或 -rpath-link)”
我正在构建一个 C++ 应用程序，使用 Netbeans 6.9 作为我的 IDE。我有一个 C++ 库，它是一个纯 C 库的包装器。我已将文件正确添加到项目中(使用添加库文件选项)。这是 g++

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 由 javascript 生成时所需的输入属性不起作用