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

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>