表单中带有JavaScript的单选按钮
我有这个JavaScript代码,我正在使用它进行表单验证,我正在尝试将两个单选按钮放入其中,并让它们以与表单其余部分相同的方式进行验证,但我无法让它工作。我的按钮html是:表单中带有JavaScript的单选按钮,javascript,html,forms,validation,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"&g
<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"/>
仅供参考的ID必须是唯一的。我也看不出你在哪里尝试验证你的单选按钮。。实际上,HTML5有很多功能可以帮助验证,比如在输入中设置required和type=email,所以您可能希望检查这一点,而不是编写太多javascript;我把它们弄得乱七八糟,几个小时后才拿出来。很抱歉,我在某一点上更改了它们。很抱歉,我整晚都在做这件事。请将您的代码放在a中。我个人认为单选按钮组应该始终有一个选中的按钮。这样一来,用户就不可能在没有选中按钮的情况下提交表单,除非他们故意破坏自己的表单。
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;
}