javascript - 提交表单时验证所有 html 行-6ren

javascript - 提交表单时验证所有 html 行

转载作者：行者123 更新时间：2023-12-03 00:42:18

我正在处理 html 表，用户可以在其中输入详细信息，然后单击提交按钮将数据提交到后端。我有 3 个必填列(Spring、Role、Project)，用户在单击提交按钮发送到后端之前必须输入这些列。如果用户在前两行中输入数据并单击提交按钮，我想验证用户是否在每行的必填字段 Sprint、Role 和 Project 中输入了数据，并且如果用户错过了在必填字段中输入数据，那么我想在该行附近显示错误消息“请输入必填字段”。如果用户未在其中输入数据，我很困惑如何显示每行的错误消息当用户在前 3 行输入数据后单击提交按钮时的必填字段。任何输入都会有帮助。我总共有 6 行，用户可以在其中全部或几行中输入详细信息，然后单击提交按钮。只需我需要验证行并在必填字段中缺少数据的每行附近显示错误消息。

演示链接:https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview

示例 html 代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        function submitData(){
          alert("submit");
          
        }
    </script>
</head>
<body>

<table id="productTable" border="1">

    <tr>
        <th>SID</th>
        <th>Sprint <span style="color:red;">*</span></th>
        <th>Role<span style="color:red;">*</span></th>
        <th>Comments</th>
        <th>Project<span style="color:red;">*</span></th>
    </tr>

    <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>       

</table> <br>
<input type="submit" value="submit" onclick="submitData()">

最佳答案

检查是否输入了所有数据，然后部分输入了其余数据

if (sprint && role && project) {.....}
else if (!sprint && !role && !project) {} // do nothing
else {....}

演示:

function submitData() {
  var dataPassed = false,
    dataCount = 0,
    hasEnteredData = false;
  $('#productTable tr:not(:first)').each(function(index) {

    var sprint = $(this).find('.sprint :selected').text(),
      role = $(this).find('input[name="role"]').val(),
      project = $(this).find('.project :selected').text();
    if (sprint && role && project) {
      dataPassed = true
      dataCount++;
    }
    else if (!sprint && !role && !project) {
      // all empty, skip
    }
    else {
      alert('Required data missing in row: ' +
        (index + 1) + '\nfill: Sprint, Role, Project')
      dataPassed = false;
      hasEnteredData = true;
      return false;
    }
  })

  if (dataPassed) {
    alert('Success, Data count: ' +
      dataCount + ' rows, submit?');
    // do submit
  }
  else if (!hasEnteredData) {
    alert('No data entered')
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="productTable" border="1">

    <tr>
      <th>SID</th>
      <th>Sprint <span style="color:red;">*</span></th>
      <th>Role<span style="color:red;">*</span></th>
      <th>Comments</th>
      <th>Project<span style="color:red;">*</span></th>
    </tr>

    <tr>
      <td>
        <input type="text" name="sid" value="">
      </td>
      <td>
        <select class="sprint">
          <option value=""></option>
          <option value="">121.1</option>
          <option value="">121.2</option>
          <option value="">121.3</option>
          <option value="">122.1</option>
          <option value="">122.2</option>
        </select>
      </td>
      <td>
        <input type="text" name="role" value="">
      </td>
      <td>
        <input type="text" name="Comments" value="">
      </td>
      <td>
        <select class="project">
          <option value=""></option>
          <option value="">ProA</option>
          <option value="">ProB</option>
          <option value="">ProC</option>
          <option value="">ProD</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="sid" value="">
      </td>
      <td>
        <select class="sprint">
          <option value=""></option>
          <option value="">121.1</option>
          <option value="">121.2</option>
          <option value="">121.3</option>
          <option value="">122.1</option>
          <option value="">122.2</option>
        </select>
      </td>
      <td>
        <input type="text" name="role" value="">
      </td>
      <td>
        <input type="text" name="Comments" value="">
      </td>
      <td>
        <select class="project">
          <option value=""></option>
          <option value="">ProA</option>
          <option value="">ProB</option>
          <option value="">ProC</option>
          <option value="">ProD</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="sid" value="">
      </td>
      <td>
        <select class="sprint">
          <option value=""></option>
          <option value="">121.1</option>
          <option value="">121.2</option>
          <option value="">121.3</option>
          <option value="">122.1</option>
          <option value="">122.2</option>
        </select>
      </td>
      <td>
        <input type="text" name="role" value="">
      </td>
      <td>
        <input type="text" name="Comments" value="">
      </td>
      <td>
        <select class="project">
          <option value=""></option>
          <option value="">ProA</option>
          <option value="">ProB</option>
          <option value="">ProC</option>
          <option value="">ProD</option>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <input type="submit" value="submit" onclick="submitData()">

关于javascript - 提交表单时验证所有 html 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53399359/

文章推荐： javascript - 使用 setInterval 随着时间的推移减少变量

文章推荐： javascript - 使用 javascript 强制指定路线

文章推荐： javascript - 循环内的 React ref 在重新渲染时中断

jsf - Bean 验证 VS JSF 验证
在 JSF2 应用程序中遇到验证属性的问题时，有两种主要方法。使用 Annotation 在 ManagedBean 上定义验证 @ManagedBean public class MyBean {
javascript - Jquery 验证。验证 "keyup"并在密码正确时隐藏表单
我想实现一个不常见的功能，我认为 jquery 验证插件将是最好的方法(如果您在没有插件的情况下建议和回答，我们也会欢迎)。我想在用户在输入字段中输入正确的单词后立即隐藏表单。我试过这个: $("
javascript - jQuery 验证 - 同一类的 NotEqual 验证
我有几个下拉菜单(类名为month_dropdown)，并且下拉菜单的数量不是恒定的。我怎样才能为它们实现 NotEqual 验证。我正在使用 jQuery 验证插件。这就是我写的 - jQuery
php - Javascript 中的 URL 验证 InstaGram 验证
我设法制作了这个网址验证代码并且它起作用了。但我面临着一个问题。我认为 stackoverflow 是获得解决方案的最佳场所。 function url_followers(){ var url=do
java - 验证/验证 Google Play 游戏服务 ID？
我目前正在使用后端服务，该服务允许用户在客户端应用程序上使用 Google Games 库登录。用户可以通过他们的 gplay ID 向我们发送信息，以便登录或恢复旧帐户。用户向我们发送以下内容，包
完整和部分 IP 的 python IP 验证 REGex 验证
我正在尝试验证输入以查看它是否是有效的 IP 地址(可能是部分地址)。可接受的输入:172、172.112、172.112.113、172.112.113.114 Not Acceptable 输入
regex - Mongoose 验证 : required : false, 验证 : regex, 问题与空值
我从 Mongoose 验证中得到这条消息: 'Validator failed for path phone with value ``' 这不应该发生，因为不需要电话。这是我的模型架构: var
openssl - 使用 .start_tls_s() 时如何强制 Python LDAP 验证/验证 SSL 证书
我一直在尝试使用Python-LDAP (版本 2.4.19)在 MacOS X 10.9.5 和 Python 2.7.9 下我想在调用 .start_tls_s() 后验证与给定 LDAP 服务
javascript - 在 VS 2017 中禁用一个项目的 ESLint/CSSLint/Javascript 验证/CSS 验证
我正在处理一个仅与 IE6 兼容的旧 javascript 项目(抱歉...)，我想仅在 VS 2017 中禁用此项目的 ESLint/CSLint/Javascript 验证/CSS 验证。我知道
spring - 使用 Hibernate Validator 验证 double 和 float 值 - bean 验证
我正在寻找一种方法来验证 Spring 命令 bean 中的 java.lang.Double 字段的最大值和最小值(一个值必须位于给定的值范围之间)，例如, public final class W
java - 无法执行目标org.apache.maven.plugins :maven-failsafe-plugin:2. 12:验证(验证)
我正在尝试在 springfuse(JavaEE 6 + Spring Framework (针对 Jetty、Tomcat、JBoss 等)) 和 maven 的帮助下构建我的 webapps 工作
Scalaz 验证
我试图在我们的项目中使用 scalaz 验证，但遇到了以下情况: def rate(username: String, params: Map[String, String]): Validation
YamlLint 验证
我有一个像这样的 Yaml 文件 name: hhh_aaa_bbb arguments: - !argument name: inputsss des
JavaScript 验证
我有一个表单，人们可以单击并向表单添加字段，并且我需要让它在单击时验证这些字段中的值。假设我单击它两次并获取 2 个独立的字段集，我需要旋转 % 以确保它在保存时等于 100。我已放入此函数以使其
JavaScript 验证
在我的页面中有一个选项可以创建新的日期字段输入框。用户可以根据需要创建尽可能多的“截止日期”和“起始日期”框。就像，日期_to1 || date_from1 日期到2 ||日期_from2 date
YamlLint 验证
我有一个像这样的 Yaml 文件 name: hhh_aaa_bbb arguments: - !argument name: inputsss des
Jquery 验证
有没有办法在动态字段上使用 jquery 验证表单。我想将其设置为必填字段我正在使用 Jsp 动态创建表单字段。喜欢等等...... 我想使用必需的表单字段验证此表单字段。最佳答
JavaScript 验证
嗨，任何人都可以通过提供 JavaScript 代码来帮助我验证用户名文本框不应包含数字，它只能包含一个字符。最佳答案使用正则表达式: (\d)+ 如果找到匹配项，则字符串中就有一个数字。关于J
JavaScript 验证
我有两个输入字段holidayDate和Description(id=tags) $(document).ready(function() {
JavaScript 验证 :
我遇到了这个问题，这些验证从电子邮件验证部分开始就停止工作。我只是不明白为什么即使经过几天的观察，只是想知道是否有人可以在这里指出我的错误？ Javascript部分: function valid

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 提交表单时验证所有 html 行