Question

我正在尝试验证此表单，并且我遇到了单选按钮的问题。其他所有工作都很好，直到我添加了按钮。有人可以解释我错过了什么。我对JavaScript知之甚少。我不确定你是否需要更多的代码，但这是无线电部分的html和JavaScript。谢谢！

<label class="required" for="buttons">How May I Contact You:</label><br/>
    <input id="radio" type="radio" name="contact" value="email">Email<br>
    <input id="radio" type="radio" name="contact" value="no contact">No Contact<br>
    <span id="radio_validation" class="error"></span>

var radio = document.getElementById('name');
  var radio_validation = document.getElementById("radio_validation");
if (radio.value === "") {
     valid =0;
     email_validation.innerHTML = "Field Required";
     email_validation.style.display = "block";
     emal_validation.parentNode.style.backgroundColor = "#FFDFDF";
   } else {
    email_validation.style.display = "none";
    email_validation.parentNode.style.backgroundColor = "transparent";
  }

感谢大家的帮助。这是我添加按钮之前的所有代码，它工作得很好。我添加按钮，我不断收到我在下面的评论中突然出现的错误。我从未移动过该文件。

function validateForm() {
  var valid = 1;
  var email = document.getElementById('email');
  var email_validation = document.getElementById("email_validation");
  var name = document.getElementById('name');
  var name_validation = document.getElementById("name_validation");
  var message_validation = document.getElementById("message_validation");
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

  if (name.value === "") {
    valid = 0;
    name_validation.innerHTML = "Field Required";
    name_validation.style.display = "block";
    name_validation.parentNode.style.backgroundColor = "#FFDFDF";
  } else {
    name_validation.style.display = "none";
    name_validation.parentNode.style.backgroundColor = "transparent";

  }

  if (message.value === "") {
    valid = 0;
    message_validation.innerHTML = "Field Required";
    message_validation.style.display = "block";
    message_validation.parentNode.style.backgroundColor = "#FFDFDF";
  } else {
    message_validation.style.display = "none";
    message_validation.parentNode.style.backgroundColor = "transparent";
  }

  if (email.value === "") {
    valid = 0;
    email_validation.innerHTML = "Field Required";
    email_validation.style.display = "block";
    email_validation.parentNode.style.backgroundColor = "#FFDFDF";
  } else {
    email_validation.style.display = "none";
    email_validation.parentNode.style.backgroundColor = "transparent";
  }

  if(!filter.test(email.value)) {
    valid = 0;
    email_validation.innerHTML = "Invalid email address";
    email_validation.style.display = "block";
    email_validation.parentNode.style.backgroundColor = "#FFDFDF";
  } else {
    email_validation.style.display = "none";
    email_validation.parentNode.style.backgroundColor = "transparent";
  }
  if (!valid)
    return false;
}


</script>

</head>
<body>
<div id="wrapper">
<header>
   <img id="headerText" src="images/headerText.png" alt="Header Text"/>
    <nav>
      <ul class="menu">
        <li><a href="#">Explore</a>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutUs.html">About Us</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
        </ul>
        </li>
      </ul>
   </nav>
   </header>
<aside>  
   <img id="contactText" src="images/contactText.png" alt="Contact Text"/> 
</aside>
<div id="contactForm">
   <form id="contact_form" action="thanks.html" method="POST" onsubmit="return validateForm();" enctype="multipart/form-data">
  <div class="row">
    <label class="required" for="name">Your name:</label><br />
    <input id="name" name="name" type="text" value="" size="30" /><br />
    <span id="name_validation" class="error"></span>
  </div>
  <div class="row">
    <label class="required" for="email">Your email:</label><br />
    <input id="email" name="email" type="text" value="" size="30" /><br />
    <span id="email_validation" class="error"></span>
  </div>
  <div class="row">
    <label class="required" for="message">Your message:</label><br />
    <textarea id="message" name="message" rows="7" cols="30"></textarea><br />
    <span id="message_validation" class="error"></span>
  </div>
    <label class="required" for="buttons">How May I Contact You:</label><br/>
    <input type="radio" name="contact" value="email">Email<br>
    <input type="radio" name="contact" value="no contact">No Contact<br>
    <input type="submit" value="Send email" />
</form>

Answer 1

if (radio.value === "")

到

if ( radio.checked  )

Answer 2

试试这个：

<强>脚本

var validate = function () {
    var r0 = document.getElementById('radio0').checked;
    var r1 = document.getElementById('radio1').checked;
    var err = document.getElementById('radio_validation');
    err.className = r0 || r1 ? "error hide" : "error show";
};

<强> HTML

<label class="required" for="buttons">How May I Contact You:</label>
<br/>
<input id="radio0" type="radio" name="contact" value="email">Email
<br>
<input id="radio1" type="radio" name="contact" value="no contact">No Contact
<br> <span id="radio_validation" class="error hide">Field Required</span>

<input type="button" onclick="validate()" value="Check" />

<强> CSS

.error {
    color: red;
}
.show {
    visibility: visible;
}
.hide {
    visibility: hidden;
}

无线电按钮无法验证

2 个答案: