Question

我是一名jQuery / JavaScript初学者，并尝试使用验证创建电子表格样式表单，以便在为行中的任何字段输入信息后，该行中的所有字段也应该是必需的。 This帖子和其中一条建议在如何处理行中文本输入字段的验证方面非常有用。但是，我还需要应用该验证逻辑来选择行中的字段。我尝试更改.on（）和.find（）函数中的设置，但没有运气。如何更改此脚本（取自上面的帖子）以处理行中的选择字段以及文本输入字段？ Here是一个演示，其中行验证适用于文本输入，但不适用于选择字段。谢谢！

$("#mytable").on("input", "input", function(){
    var anySet = false,
        $cells = $(this).closest("tr").find("td input");
    $cells.each(function() {
        var somethingInCell = $(this).val().trim() !== '';
        anySet |= somethingInCell;
    });
    $cells.removeClass("has-error");
    if (anySet) {
        $cells.each(function() {
            if ($(this).val().trim() === '') {
                $(this).addClass("has-error");
            }
        });
    }
});

Answer 1

这样的事情怎么样？

你几乎就在那里，只需要一种方法来定位select字段并找出它们如何触发事件 - .change()。完成后，您可以找到选择的.val()并将其与NA（相当于空/空/未选中）进行比较，然后相应地添加has-error。

$(document).ready(function() {
    $("#mytable").on("change", "input, select", function(){    
        var $selects = $(this).closest('tr').find('td select'),
            $cells = $(this).closest("tr").find("td input");
        $cells.removeClass("has-error");
        $selects.removeClass("has-error");
        $cells.each(function() {
            if ($(this).val().trim() === '') {
                $(this).addClass("has-error");
            }
        });
        $selects.each(function() {
            console.log($(this).val() == 'NA');
            if ($(this).val() == 'NA') {
                $(this).addClass("has-error");
            }
        });
    });
});

.has-error{
    
border-style: solid;
    border-color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<table id="mytable">
    <tr>
        <th>Row</th>
        <th>ID</th>
        <th>Date</th>
        <th>Yes/No</th>
    </tr>
    <tr>
        <td>1</td>
        <td>
            <input type="TEXT" id="ID1" name="ID1" class="target ids" />
        </td>
        <td>
            <input type="TEXT" id="DATE1" name="DATE1" class="target"  />
        </td>
        <td>
            <select id="YN1" name="YN1" class="target" >
                <option value="NA">NA</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>
            <input type="TEXT" id="ID2" name="ID2" class="target ids" />
        </td>
        <td>
            <input type="TEXT" id="DATE2" name="DATE2" class="target" />
        </td>
        <td>
            <select id="YN2" name="YN2" class="target" >
                <option value="NA">NA</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <input type="TEXT" id="ID3" name="ID3" class="target ids" />
        </td>
        <td>
            <input type="TEXT" id="DATE3" name="DATE3" class="target"  />
        </td>
        <td>
            <select id="YN3" name="YN3" class="target" >
                <option value="NA">NA</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </td>
    </tr>
</table>

Answer 2

我玩了你的代码，得到了理想的结果。我认为最好定位.target类，而不是尝试定位input和select。

您遇到的另一个问题是，即使select选项没有值，发送的值也默认为选项标记之间的值。所以我们也需要验证该值。

// Listen for input and change events (input = input select = change)
// Target element by classname rather than label
$("#mytable").on("input, change", "td .target", function () {
    var anySet = false,
        $cells = $(this).closest("tr").find("td .target");
    $cells.each(function () {

        // Get the value of input/select
        var somethingInCell = $(this).val().trim();
        console.log(somethingInCell)

        if (somethingInCell === '' || somethingInCell === 'NA') {

          // Using anySet var to run validation
          anySet = true
        }

        //anySet |= somethingInCell;
    });
    $cells.removeClass("has-error");
    if (anySet) {
        $cells.each(function () {
            if ($(this).val().trim() === '' || $(this).val().trim() === 'NA') {
                $(this).addClass("has-error");
            }
        });
    }
});

在此处JSFiddle

这可以清理一下，但我只是回答你的初步问题。希望你能更多地了解这一点，并用它来帮助。

Answer 3

验证可能是一个棘手的问题 - 它可能非常复杂，幸运的是，我们生活在一个我们可以访问互联网的世界，一个人们做出惊人的事情并免费分享这些东西的地方。

退房：http://jqueryvalidation.org/

免费的验证插件，小巧且易于使用。

基本示例：

<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
  <legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
  <label for="cname">Name (required, at least 2 characters)</label>
  <input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
  <label for="cemail">E-Mail (required)</label>
  <input id="cemail" type="email" name="email" required>
</p>
<p>
  <label for="curl">URL (optional)</label>
  <input id="curl" type="url" name="url">
</p>
<p>
  <label for="ccomment">Your comment (required)</label>
  <textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
  <input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
   $("#commentForm").validate();
</script>

对带有文本输入和选择字段的行进行jQuery验证？

3 个答案: