验证单选按钮和下拉菜单

Question

如何为单选按钮和下拉框创建验证？ 我是否需要在顶部创建一个<script>函数？

<tr> 
    <td class="alt"><label for="period"><b>Transaction Period:</b> </label></td>
    <td><input type="radio" name="period" value="current">Current Month<br>
        <input type="radio" name="period" value="current_first">Last 1 Month and Current Month<br>
        <input type="radio" name="period" value="current_second">Last 2 Months and Current Month</td>          
</tr>
    <td class="alt"><label for="type"><b>Type: </b></label></td>
    <td>
        <input type="radio" name="type" value="both">Credit and Debit<br>
        <input type="radio" name="type" value="credit">Credit Only<br>
        <input type="radio" name="type" value="debit">Debit Only 
    </td>
<tr>
    <td class="alt"><label for="sort"><b>Sort According To: </b></label></td>
    <td> <select name="sort">
            <option value="latest">Latest Transaction First</option>
            <option value="earliest">Earliest Transaction First</option>
              <option value="codes">Transaction Codes</option>
            </select>
    </td>
</tr>

Answer 1

要突出显示无效输入，请使用:invalid伪类。 这在较旧的浏览器中不起作用，但是较新的浏览器都支持在输入中使用它。 对于输入，您将必须添加required属性，并且需要在其标签周围添加标签（例如<span> ），以使该标签有效：

新的HTML代码：

<table>
    <tr>
        <td class="alt">
            <label for="period"><b>Transaction Period:</b> 
            </label>
        </td>
        <td>
            <input type="radio" required name="period" value="current"><span>Current Month</span>
            <br>
            <input type="radio" required name="period" value="current_first"><span>Last 1 Month and Current Month</span>
            <br>
            <input type="radio" required name="period" value="current_second"><span>Last 2 Months and Current Month</span>
        </td>
    </tr>
    <td class="alt">
        <label for="type"><b>Type: </b>
        </label>
    </td>
    <td>
        <input type="radio" required name="type" value="both"><span>Credit and Debit</span>
        <br>
        <input type="radio" required name="type" value="credit"><span>Credit Only</span>
        <br>
        <input type="radio" required name="type" value="debit"><span>Debit Only </span>

    </td>
    <tr>
        <td class="alt">
            <label for="sort"><b>Sort According To: </b>
            </label>
        </td>
        <td>
            <select name="sort" required>
                <option value="" selected disabled>Please select an option</option>
                <option value="latest">Latest Transaction First</option>
                <option value="earliest">Earliest Transaction First</option>
                <option value="codes">Transaction Codes</option>
            </select>
        </td>
    </tr>
</table>

CSS：

input:invalid + span {
    background:#F99;
}
select:invalid {
    color:#F55;
}

演示

该伪类如何工作

如果:invalid此:invalid伪类将选择一个输入元素：

• 具有特定值，例如type="number" ，并且输入的输入不符合该特定输入类型的值
• 没有分配的值，例如<select>了一个空值选项，或者单选按钮没有单选按钮之一，它与选择的名称共享其单选按钮
• 输入具有定义的pattern或max类的属性，并且输入与输入的样式不匹配或超过最大值。

如果任何输入仍然:invalid ，即使按下提交按钮，也不会提交表单。 （ 简单的例子 ）