Required fields but ONLY if data entered in another field that isn't required

[junestag]

I have a form that allows users to enter textbook information for their course. They need to include information such as author, publisher, book title, isbn, etc. They can enter information for more than one book if they choose.

I need to write some code that makes the publisher and book title fields required...but ONLY if they choose to add a first, second, third book.

I guess what I'm looking for is some help on how to create required fields that are dependent on some other field being selected/checked.

[magicyte]

There really isn't any HTML way of taking care of required fields, so JavaScript will save the day! What JavaScript might do for you is give an if statement including bool variables, in otherwords variables that contain either true or false. Technically in the if statement, there should be one variable that tells us either that there are three books entered or not. This will be taken care of in another function which will determine if all of the three books are entered into the fields. If all three books are entered, then the bool variable will be true. Otherwise it will be false. In the first function, we discussed that if this certain bool variable is true, something will happen. We will discuss that later. Anyway, the certain bool variable will tell if the three books have been entered. If so, in the if statement we will check if the textboxes contain characters ( if(document.getElementById("yada").value == "") { alert("You must enter publisher and title if you have three books.") } else { ...do something else if the user entered stuff in correctly... }). It is very hard to explain, but it is very easy to understand and code. I was just giving a suggestion. I am truly sorry if it doesn't help, but considering that you are a junior coder, you should be able to understand at least a little bit. If this situation is very important, let me see what I can whip up. E-mail me at magicyte.programmer@gmail.com. I'm sure I could come up with something if you could just email the code for such program as well. Sayonara!

-magicyte

[marynorn]

I have a similar problem, I have a form with a series of yes/no radio boxes and 'why' textareas. I need the text areas to be required, but ONLY if the corresponding 'no' radio button has been selected.


<p>1. *Question goes here*</p>
<p>
<label>
<input type="radio" name="1" value="Yes" id="1_0" />
Yes</label>
<br />
<label>
<input type="radio" name="1" value="No" id="1_1" />
No</label>
<label></label>
<br />
</p>
<p>&nbsp;</p>

<p>1a. If not, why not?</p>
<p>&nbsp;</p>
<p>
<textarea name="1a" id="1a" cols="60" rows="5"></textarea>
</p>

I only have a vague idea what magicyte is talking about. Anyone have a piece of sample code I can play with?

[btilly]

How do you do a "required field" in JavaScript? The answer is that you have an onSubmit method on the form that returns false if validation fails. It might also do an alert. So expanding the example you gave:


<script>
function checkForm() {
if ( document.getElementById("1_1").checked ) {
var mytext = document.getElementById("1a").value;
if ("" == mytext) {
alert("Explanation needed for No answer to question #1");
return false;
}
}
return true;
}
</script>
<form onSubmit="return checkForm()">
<p>1. *Question goes here*</p>
<p>
<label>
<input type="radio" name="1" value="Yes" id="1_0" />Yes</label>
<br />
<label>
<input type="radio" name="1" value="No" id="1_1" />No</label>
<label></label>
<br />
</p>
<p>&nbsp;</p>

<p>1a. If not, why not?</p>
<p>&nbsp;</p>
<p>
<textarea name="1a" id="1a" cols="60" rows="5"></textarea>
</p>
<input type=submit></input>
</form>

Now be warned that anyone who wants can bypass JavaScript checks by just turning JavaScript off. Or by copying your page, manually editing out the JavaScript, and then submitting from that. Therefore if it really matters to you, all validation checks must happen on the server side, and the JavaScript checks are just a convenience for your users. Getting that set up is beyond what I'm willing to answer in this post.

[marynorn]

HA! I have edited this reply twice with problems, then realised the problem is ME. I need more coffee, your code works beautifully. Thank you very much :)