Javascript 表单验证单选按钮_Javascript_Html

Javascript 表单验证单选按钮

javascript html

Javascript 表单验证单选按钮,javascript,html,Javascript,Html,我想使用JavaScript在HTML中验证我的表单，特别是检查用户是否单击其中一个单选按钮。我的部分代码如下： HTML: 您只需向组中的一个单选按钮添加属性，它将触发本机验证：你的单位 COS10011 COS60004 COS60007 你的导师：导师1 导师2 导师3 提交您可以使用document.getElementsByName执行此操作函数checkIt（）{ let unit=document.getElementsByName（“单位”）；设select

我想使用JavaScript在HTML中验证我的表单，特别是检查用户是否单击其中一个单选按钮。我的部分代码如下：

HTML:

您只需向组中的一个单选按钮添加属性，它将触发本机验证：


你的单位
COS10011
COS60004
COS60007



你的导师：
导师1
导师2
导师3

提交

您可以使用

document.getElementsByName

执行此操作

函数checkIt（）{
let unit=document.getElementsByName（“单位”）；
设selected=false；
对于（让i=0；i工作很棒
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<fieldset>
            <legend>Your unit</legend>
                <label for="COS10011"><input type="radio" name="unit" id="COS10011" class="radio" value="1">COS10011</label>
                <label for="COS60004"><input type="radio" name="unit" id="COS60004" class="radio" value="2">COS60004</label>
                <label for="COS60007"><input type="radio" name="unit" id="COS60007" class="radio"  value="3">COS60007</label><BR>
                <p><label>Your Tutor: </label>
                    <select name="tutor" id="tutor">
                        <option value="1" selected="selected">Tutor 1</option>
                        <option value="2">Tutor 2</option>
                        <option value="3">Tutor 3</option>
                    </select>
                </p>
        </fieldset>
</body>
<script>
    
    $(document).ready(function () {
       $('.radio').click(function () {
           selectElement('tutor', $(this).val());
       });
   });
   

  function selectElement(id, valueToSelect) {    
      let element = document.getElementById(id);
      element.value = valueToSelect;
    }

    
</script>
</html>


页面标题
这是一个标题
这是一段
你的单位
COS10011
COS60004
COS60007

你的导师：
导师1
导师2
导师3

$（文档）.ready（函数（）{
$（'.radio'）。单击（函数（）{
selectElement（'tutor'，$（this.val（））；
});
});
函数selectElement（id，valueToSelect）{
let element=document.getElementById（id）；
element.value=要选择的值；
}
默认情况下，您可以首先检查其中一个单选按钮。因此，您不必检查是否选择了其中任何一个。您可以澄清问题是什么吗？您的代码是如何使用的，它是如何失败的？以下是如何在提交事件中进行验证：@firatozcevahir啊，我明白了，我可以知道怎么做吗？只需添加checked
属性t即可o其中一个单选按钮。如下所示：
@ChrisG显示的JavaScript无法验证是否选择了其中一个按钮，就像它对表单没有任何作用一样。它会使所有单选按钮都必须被选中吗？@cpw是的，您可以在上面的演示中看到，如果从组中选择了任何单选按钮，则表单提交默认的web验证是否正确？但我需要另一个验证，如果表单的任何部分未填写，则显示弹出框in@cpw本机验证也有JavaScript钩子，请参见@cpw使用custsom JS validationah检查第二个代码段，我看到了，但是有没有一种方法可以将整个内容像在单独的文件而不是这个GoI修改了checkIt函数以满足您的需要，您只需将它的内容复制到“isUnitSelected”函数，它应该可以工作。如果选择了非收音机，它应该会显示弹出消息。您检查了返回值吗？我已经更新了脚本，它应该满足您的需要。
function isUnitSelected(){
    var selected = false;
    var isCOS10011 = document.getElementById("COS10011").checked;
    var isCOS60004 = document.getElementById("COS60004").checked;
    var isCOS60007 = document.getElementById("COS60007").checked;
    
    if (isCOS10011 || isCOS60004 || isCOS60007)
        selected = true; //we haven't used {}. BE CAREFUL about adding extra lines
    else{
        selected = false;
        gErrorMsg = gErrorMsg + "Select a sex for your cat\n"
    }
    
    return selected;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<fieldset>
            <legend>Your unit</legend>
                <label for="COS10011"><input type="radio" name="unit" id="COS10011" class="radio" value="1">COS10011</label>
                <label for="COS60004"><input type="radio" name="unit" id="COS60004" class="radio" value="2">COS60004</label>
                <label for="COS60007"><input type="radio" name="unit" id="COS60007" class="radio"  value="3">COS60007</label><BR>
                <p><label>Your Tutor: </label>
                    <select name="tutor" id="tutor">
                        <option value="1" selected="selected">Tutor 1</option>
                        <option value="2">Tutor 2</option>
                        <option value="3">Tutor 3</option>
                    </select>
                </p>
        </fieldset>
</body>
<script>
    
    $(document).ready(function () {
       $('.radio').click(function () {
           selectElement('tutor', $(this).val());
       });
   });
   

  function selectElement(id, valueToSelect) {    
      let element = document.getElementById(id);
      element.value = valueToSelect;
    }

    
</script>
</html>