驗證單選按鈕和下拉菜單

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 ，即使按下提交按鈕，也不會提交表單。 （ 簡單的例子 ）