验证单选按钮输入 JavaScript

Question

 const inputName = document.getElementById('input-name'); const inputEmail = document.getElementById('input-email'); const button = document.querySelector('.submit-button'); const regEx = /\\S+@\\S+\\.\\S+/; const form = document.querySelector('.form'); function confirmInput() { var inputCycling = document.getElementById('input-cycling').checked; var inputRunning = document.getElementById('input-running').checked; var inputSwimming = document.getElementById('input-swimming').checked; if ( inputName.value.trim() !== "" && regEx.test(inputEmail.value) && inputCycling == false && inputRunning == false && inputSwimming == false ) { button.style.backgroundColor = '#342e7d'; button.disabled = false; } else { button.style.backgroundColor = '#979797'; button.disabled = true; } } form.addEventListener('submit', function(e) { e.preventDefault(); console.log(inputName.value + ' ' + inputEmail.value); })

 <div class="wrapper"> <form class="form"> <input type="text" id="input-name" placeholder="name" oninput="confirmInput()"> <input type="email" id="input-email" placeholder="yourname@domain.com" oninput="confirmInput()"> <div id="radio-type"> <input type="radio" id="input-cycling" name="sport" value="cycling" oninput="confirmInput()"> Cycling <input type="radio" id="input-running" name="sport" value="running" oninput="confirmInput()"> Running <input type="radio" id="input-swimming" name="sport" value="swimming" oninput="confirmInput()"> Swimming </div> <button type="submit" class="submit-button" disabled> Submit</button> </form> </div>

我有一个验证表单的功能，如果有效，则按钮更改颜色并将禁用设置为 false。

名称和电子邮件验证工作正常，但我在单选按钮验证方面遇到了一些问题。 我遵循相同的逻辑，但无法使其正常工作，也许一双新的眼睛可以看到我遗漏的东西。

Answer 1

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

Answer 2

你贬低了我，你还没有尝试过我的解决方案......

 const inputName = document.getElementById('input-name'); const inputEmail = document.getElementById('input-email'); const button = document.querySelector('.submit-button'); const regEx = /\\S+@\\S+\\.\\S+/; const form = document.querySelector('.form'); function confirmInput() { var inputCycling = document.getElementById('input-cycling').checked; var inputRunning = document.getElementById('input-running').checked; var inputSwimming = document.getElementById('input-swimming').checked; if ( inputName.value.trim() !== "" && regEx.test(inputEmail.value) && !!form.sport.value ) { button.style.backgroundColor = '#342e7d'; button.disabled = false; } else { button.style.backgroundColor = '#979797'; button.disabled = true; } } form.addEventListener('submit', function (e) { e.preventDefault(); console.log(inputName.value + ' ' + inputEmail.value); })

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="main.css"> <title>Sign Up Form</title> </head> <body> <div class="wrapper"> <form class="form"> <input type="text" id="input-name" placeholder="name" oninput="confirmInput()"> <input type="email" id="input-email" placeholder="yourname@domain.com" oninput="confirmInput()"> <div id="radio-type"> <input type="radio" id="input-cycling" name="sport" value="cycling" oninput="confirmInput()"> Cycling <input type="radio" id="input-running" name="sport" value="running" oninput="confirmInput()" > Running <input type="radio" id="input-swimming" name="sport" value="swimming" oninput="confirmInput()" > Swimming </div> <button type="submit" class="submit-button" disabled> Submit</button> </form> </div> <script src="script.js"></script> </body> </html>

Answer 3

使用单选按钮，所有输入都必须具有相同的名称值，因此您可以通过这种方式知道是否有任何输入：

var valid = !!myform.mycheckboxname.value;

验证单选按钮输入 JavaScript

问题描述

3 个解决方案

解决方案1
0 2019-05-20 10:55:26

解决方案2
0 2019-05-20 15:45:23

解决方案3
-1 2019-05-20 10:56:15

验证单选按钮输入 JavaScript

问题描述

3 个解决方案

解决方案1 0 2019-05-20 10:55:26

解决方案2 0 2019-05-20 15:45:23

解决方案3 -1 2019-05-20 10:56:15

解决方案1
0 2019-05-20 10:55:26

解决方案2
0 2019-05-20 15:45:23

解决方案3
-1 2019-05-20 10:56:15