Question

我有5个单选按钮，提供一系列值：

        <input type="radio" name="bookperiod" id="bookperiod" value="1"/>1<br>
        <input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
        <input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>    
        <input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>    
        <input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>

我希望它确保用户已选择它们，因为目前用户无法选择一个，表单仍会提交。虽然我可以让其中一个＆＃34;检查＆＃34;，这可能意味着用户仍然可以在没有实际选择的情况下提交。

如何确保当用户点击提交时，用户肯定选择了他们的一个。

Answer 1

这是the required attribute的典型用例。

如果没有选择单选按钮，即使禁用了JavaScript，现代浏览器也不允许您提交表单。

<form action="">
    <input type="radio" name="bookperiod" id="bookperiod" value="1" required />1<br />
    <input type="radio" name="bookperiod" id="bookperiod" value="2" required />2<br />
    <input type="radio" name="bookperiod" id="bookperiod" value="3" required />3<br />    
    <input type="radio" name="bookperiod" id="bookperiod" value="4" required />4<br />    
    <input type="radio" name="bookperiod" id="bookperiod" value="5" required />5<br />

    <button type="submit">Submit</button>
</form>

http://jsfiddle.net/feeela/5cJj8/

对所需单选按钮进行简单的JS验证：

document.forms[0].addEventListener( 'submit', function( event ) {
    event.preventDefault();

    var form = event.target,
        radioHasCheckedButton = form.querySelector( 'input[required][name="bookperiod"]:checked' );

    if( !radioHasCheckedButton ) {
        // Error handling here – no radio button was checked
        console.log( 'Some required fields are missing.' );
    }
    else {
        // Everything is fine – finally submit the form
        form.submit();
    }

}, false );

Answer 2

我觉得所有这些答案几乎都没有。首先：您不能拥有多个具有相同ID的元素。将其更改为类或标签每个唯一！

您不能跳过PHP检查。必须始终这样做。请阅读与服务器端和客户端相关的内容，尤其是验证。我不想在这里进去。

添加客户端（Javascript）检查仅用于方便用户。这允许用户在点击提交按钮并且必须在服务器上等待之前知道表单是不完整的。

这可以通过几种方式完成......

使用CSS添加一个关闭可见性或显示的附加单选按钮。默认情况下会进行检查。使用javascript，你可以看到它是否仍然是选中的单选按钮（意味着用户没有选择其中一个可见的）=＆gt;显示错误

迭代每个单选按钮并确保其中一个标记为已检查（for循环内的标准if）未经测试的jqyery代码。

function validateBookPeriod() {
    var bookperiodSelected = false;
    $('.bookperiod').each(function(){
        if($this.attr('checked') == checked) bookperiodSelected=true;                 
    });

    if (bookperiodSelected == false)
        alert('Please select a book period!');
}
validateBookPeriod();

Answer 3

您可以为用户预先选择一个，然后用户将被迫选择另一个选项或接受第一个

    <input type="radio" checked name="bookperiod" id="bookperiod" value="1"/>1<br>
    <input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
    <input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>    
    <input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>    
    <input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>

制作单选按钮是用户所需的选择

3 个答案: