验证单选按钮和下拉菜单

Question

how do I create a validation for my radio buttons and drop down box? Do I need to create a <script> function on top?

<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

To highlight invalid inputs, use the :invalid pseudo-class. This won't work in older browsers , but newer browsers do all support using it on inputs. For the inputs, you will have to add the required attribute, and you'll need to add a tag around their label (for example a <span> ) for this to work though:

New HTML code:

<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;
}

Demo .

How this pseudo-class works

This :invalid pseudo-class will select an input element if it:

• has a specific value, such as type="number" , and the entered input does not meet that specific input type's value
• has no assigned value, such as a <select> having an empty-valued option selected, or radio inputs not having one of the radio buttons it shares its name with selected
• the input has an attribute such as pattern or max defined, and the input does not match the entered pattern, or exceeds the maximum value.

If any of the inputs is still :invalid , the form won't be submitted, even when pressing the submit button. ( simple example )