Validating an input field if a certain radio button is checked
I have a form with multiple question each asking for a radio button selection of Pass, Fail or N/A. What I want to achieve is if the user selects Fail for any of the questions and try to submit it will then turn on validation for 3 text fields.
The user must complete all three text input fields if they select Fail on any question and can't submit unless they do so.
Also I have validation on the questio开发者_如何学编程ns already to ensure the user selects a radio button for each field so the solution must be able to work with it as it is now. An example is of my form is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form</title>
<script>
function valbutton(thisform) {
// Question 1
myOption = -1;
for (i=thisform.questionone_one.length-1; i > -1; i--) {
if (thisform.questionone[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Pass, Fail or N/A for Question 1");
return false;
}
// Question2
myOption = -1;
for (i=thisform.questiontwo.length-1; i > -1; i--) {
if (thisform.questiontwo[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Pass, Fail or N/A for Question 2");
return false;
}
//etc...
thisform.submit();
}
</script>
</head>
<body>
<form method="post" action="send.php" enctype="multipart/form-data" class="form" name="claimform" id="claimform">
<div>1. Question? <input type="radio" name="questionone" class="radio" value="P" /> Pass <input name="questionone" type="radio" class="radio" value="F" /> Fail <inputname="questionone" type="radio" class="radio" value="N/A" /> N/A</div>
<div>1. Question? <input type="radio" name="questiontwo" class="radio" value="P" /> Pass <input name="questiontwo" type="radio" class="radio" value="F" /> Fail <inputname="questiontwo" type="radio" class="radio" value="N/A" /> N/A</div>
<button type="submit" title="Submit Claim" class="button" onclick="valbutton(claimform);return false;"><span><span>Submit Claim</span></span></button>
<button type="button" title="Reset" class="button" onclick="this.form.reset()"><span><span>Clear Form</span></span></button>
</form>
</body>
</html>
Any ideas?
Also I forgot to mention I'm using Mootools in this page so any solution should work with Mootools 1.2.
First of all, you should declare your variables using the var keyword. Otherwise, you pollute the global namespace, and JavaScript has to move up through the stack to find your variable.
Now, as for your question... I like to use jQuery. If you prefer to use plain old JavaScript then you can translate it.
function submitMyForm() {
var failAnswers = $('input[type=radio]').filter(function() { return $(this).val() == "F"; });
if (failAnswers.length > 0) {
var blankTextFields = $('input[type=text]').filter(function() { return $(this).val() == ""; });
if (blankTextFields.length > 0) {
alert('Please answer the questions');
return false;
}
}
myForm.submit();
}
Here's what we did. First we found all of the radio buttons with "F" answers. If there is at least one, we find all the text boxes with no input. If there is at least one of these, we pop up the alert message and return false. Otherwise, all is well and we submit the form.
加载中,请稍侯......
精彩评论