在表单中使用JavaScript的单选按钮

时间:2014-08-23 14:38:30

标签: javascript html forms validation

我有这个JavaScript代码,我正在使用它进行表单验证,我试图将两个单选按钮放入并让它们以与表单其余部分相同的方式进行验证但是没有让它工作。我的按钮的html是:

<label class="required" for="buttons">How May I Contact You:</label><br/>
    <input id="radio" type="radio0" name="contact" value="email">Email<br>
    <input id="radio" type="radio1" name="contact" value="no contact">No Contact<br>
    <span id="radio_validation" class="error"></span>
    <input type="submit" value="Send email" onclick="validate()" value="Check"/>

这是我正在使用的JavaScript。任何帮助将不胜感激。我还不太了解JavaScript。

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

0 个答案:

没有答案