Working Fiddle

Question

在我的表单中，我有两个单选按钮，页面上有一个脚本，用于验证表单本身，直到单选按钮。因此，如果您在单选按钮之前满足所有条件，则可以提交表单，因此我希望确保用户在提交表单之前选择一个选项。

我在这里找到了一个函数：Radio button validation in javascript

我已根据最佳答案调整脚本以适应我当前的脚本，但它不会起作用。它会崩溃，或显示错误，但仍然会转到提交页面。

我尝试与答案测试参数完全相反，因为答案使用var formValid = false;而我使用valid = true;。

我已经注释掉了函数的单选按钮检查部分，并将其返回到默认参数（并清理了答案“使用大括号”）。

function checkForm() {
    var valid = true;
    var radios = document.getElementsByName("smoking");

    if (!retext.test(document.myform.textfield.value)) {
            document.myform.textfield.style.border = "3.5px solid red";
            document.getElementById("text").innerHTML = "Invalid text.";
            document.getElementById("text").style.display = "block";
            valid = false;
    }

    if (!re.test(document.myform.email.value)) {
        document.myform.email.style.border = "3.5px solid red";
        document.getElementById("emailwarn").innerHTML = "Invalid email.";
        document.getElementById("emailwarn").style.display = "block";
        valid = false;
    }

    if (!retel.test(document.myform.tel.value)) {
        document.myform.tel.style.border = "3.5px solid red";
        document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
        document.getElementById("telwarn").style.display = "block";
        valid = false;
    }

    /*var i = 0;
    while (!valid && i < radios.length) {
       if (radios[i].checked) {
            valid = true;
        }
        i++;
    }

    if (!valid) {
        document.getElementById("radiowarn").innerHTML = "Please select one.";
        document.getElementById("radiowarn").style.display = "block";
    }*/

    return valid;
}

<form name="myform" method="POST" action="http://manutd.com" onsubmit="return checkForm()">
    <fieldset>
        <legend>Hi</legend>
        <label>Random text: </label>
        <input type="text" name="textfield">
        <div id="text"></div>
        <label>Email: </label>
        <input type="email" name="email">
        <div id="emailwarn"></div>
        <label>Tel: </label>
        <input type="tel" name="tel" maxlength="11">
        <div id="telwarn"></div>
        <label>Smoking: </label>
        <input type="radio" name="smoking" value="1">
        <label>Non-smoking: </label>
        <input type="radio" name="smoking" value="2">
        <div id="radiowarn"></div>
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">
    </fieldset>
</form>

Answer 1

$(document).ready(function () {
    $('.smoking').on('change', function () {
        var radiosSmoking = document.getElementsByName('smoking');
        if (radiosSmoking[0].checked) {
            console.log('smoking checked')
        } else if (radiosSmoking[1].checked) {
            console.log('no smoking checked')
        }
    });
});

Fiddle Reference

另一种选择：

 var radiosSmoking = document.getElementsByName('smoking');
    if (!(radiosSmoking[0].checked || radiosSmoking[1].checked)) {
        valid = false;
    }

希望这有帮助。

Answer 2

尝试此功能：

function isRadioChecked(form, name) {
  var radios = form.elements[name];
 for (i=0, radios.length;i++) {
    if ( radios[i].checked == true ) {
        return true;
    }
}
  return false;
}

Answer 3

试试这个，

以下面的方式更新单选按钮验证码......

var radios = document.getElementsByName("smoking");
        var i = 0
        while (i < radios.length) {
            if (radios[i].checked) {
                return true;
            }
            else
            { return false; }
            i++;
        }

Answer 4

试试这个

请将 Jquery 1.7.2 包含在文件

中

<强>的Javascript

function checkForm() {
    var valid = false;
    var radios = document.getElementsByName("smoking");

    var i = 0;
    while (!valid && i < radios.length) {
       if (radios[i].checked) {
            valid = true;
        }
        i++;
    }

    if (!valid) {
        document.getElementById("radiowarn").innerHTML = "Please select one.";
        document.getElementById("radiowarn").style.display = "block";
    }

    return valid;
}

JavaScript - 检查是否选择了单选按钮

4 个答案:

Working Fiddle