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);
})

<!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>

我有一个验证我的表单的函数，如果有效，则按钮会更改颜色并将禁用设置为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 个答案: