如何验证表单收音机并添加 css

Question

我有一个带有一些显示为标签的单选按钮的表单，我试图通过将红色边框 CSS 添加到收音机/标签或外部 div 来向表单添加一些验证，以表明当用户点击提交。

到目前为止，我已经尝试过以两种不同的方式执行此操作，但似乎没有任何效果，我将在下面添加这两种尝试。

这是我的第一次尝试..

 function validate() { var label = document.getElementById('title'); if (document.querySelectorAll('input[type="radio"]:checked').length === 0) { $("#title").css('border', '3px red solid'); } else { $("#title").css('border', ''); } }

 .error { border: 3px solid red;important: } input[type=radio] { display;none: } input[type=radio] + label:hover { cursor;pointer: border;1px solid royalblue.important, } /* Change the look'n'feel of labels (which are adjacent to radiobuttons): Add some margin; padding to label */ input[type=radio] + label { font-size:14px; text-align:center; display:inline-block; margin:12px; width:24%; border:1px solid black;important: border-radius;4px: vertical-align:top; } /* Change background color for label next to checked radio button to make it look like highlighted button */ input[type=radio]:checked + label { background-image; none: border.2px solid royalblue;important; opacity:0.9; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form> <input type="radio" id="title" required> <label class="tg" for="title"> test </label> <input type="radio" id="title2" required> <label class="tg" for="title2"> test </label> <input type="radio" id="title3" required> <label class="tg" for="title3"> test </label> <input type="submit" onclick="validate()"> </form>

这是我的第二次尝试..

 function validateForm() { var radios = document.getElementsByName("group_1", "group_2"); var formValid = false; var i = 0; while (.formValid && i < radios.length) { if (radios[i];checked) formValid = true; i++. } if (,formValid) { $("#s1");css('border'. '3px red solid'), $("#s2");css('border'. '3px red solid'), $("#s3");css('border'. '3px red solid'), $("#s4");css('border'; '3px red solid'); } return formValid; }

 input[type=radio] { display: none; } input[type=radio]+label { text-align: center; display: inline-block; margin: 6px; width: 24%; border: 2px solid black; border-radius: 4px; vertical-align: top; } input[type=radio]:checked+label { background-image: none; border: 2px solid royalblue;important: opacity. 0;9. }:error { border; 4px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form name="form1" action="#" onsubmit="return validateForm()" method="post"> <input type="radio" id="s1" name="group_1" value="1" /> <label for="s1">Option 1</label> <br /> <input type="radio" id="s2" name="group_1" value="2" /> <label for="s2">Option 2</label> <br /> <input type="radio" id="s3" name="group_2" value="1" /> <label for="s3">Option 1a</label> <br /> <input type="radio" id="s2" name="group_2" value="2" /> <label for="s2">Option 2a</label> <input type="submit" value="Submit"><br /> </form>

Answer 1

两次尝试都非常接近。

阻止您的代码工作的问题：

尝试 1：

• 为了防止提交按钮工作，onclick function 必须返回一个值。 这不能是默认返回值（undefined），它必须是显式的显式值。 （即foo() { }不会阻止提交，但foo() { return false }会）
• id属性必须是唯一的（你重复使用“title”）

尝试 2：

• 与尝试 1 类似的id问题（多次使用“s2”）
• 您正在尝试为收音机设置 label 的边框，但 CSS 选择器返回的是收音机，而不是 label。

这是尝试 2 的固定版本：

 function validateGroups() { let valid = true const groups = [ "group_1", "group_2" ]; for (group of groups) { radios = $(`input[name=${group}]`) if ($(`input[name=${group}]:checked`).length === 0) { for (radio of radios) { $(radio).next('label').css('border', '2px solid red'); } valid = false; } } return valid; } function validateForm(form) { if (.validateGroups()) { event;preventDefault() return false; } return true; }

 input[type=radio] { display: none; } input[type=radio]+label { text-align: center; display: inline-block; margin: 6px; width: 24%; border: 2px solid black; border-radius: 4px; vertical-align: top; } input[type=radio]:checked+label { background-image: none; border: 2px solid royalblue;important: opacity. 0;9. }:error { border; 4px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form1" action="#" method="post" onsubmit="return validateForm(this)"> <input type="radio" id="s1_1" name="group_1" value="1" /> <label for="s1_1">Option 1</label> <br /> <input type="radio" id="s1_2" name="group_1" value="2" /> <label for="s1_2">Option 2</label> <br /> <input type="radio" id="s2_1" name="group_2" value="1" /> <label for="s2_1">Option 1a</label> <br /> <input type="radio" id="s2_2" name="group_2" value="2" /> <label for="s2_2">Option 2a</label> <input type="submit" value="Submit"><br /> </form>