Click to See Complete Forum and Search --> : form validation - interdependent fields
pettyc
07-12-2003, 02:10 PM
I need a script to force the entry of a field if another field was selected. For example
I have a field called Rescheduled and a field called Oridinaldate. Rescheduled is a drop down box (yes or no). If Rescheduled is Yes I want the originaldate field to be required. Can someone help me?
Charles
07-12-2003, 02:46 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
label {display:block; margin:1em 0em}
-->
</style>
<script type="text/javascript">
<!--
function validate (f) {if (f.rescheduled.value && !/\S/.test(f.originalDate.value)) {alert ('The field "Original Date" needs to be filled in.'); f.originalDate.focus(); return false}}
// -->
</script>
<form action="" onsubmit="return validate(this)">
<div>
<label>Rescheduled?<br>
<select name="rescheduled">
<option value="true">Yes</option>
<option value="">No</option>
</select></label>
<label>Original Date<br><input type="text" name="originalDate"></label>
<button type="submit">Submit</button>
</div>
</form>
Charles
07-12-2003, 02:59 PM
Next, however, you will want to know how to make sure that what they entered in that field really is a date.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
label {display:block; margin:1em 0em}
-->
</style>
<script type="text/javascript">
<!--
function validate (f) {if (f.rescheduled.value && (!/\S/.test(f.originalDate.value) || /NaN/.test(f.originalDate.value))) {alert ('The field "Original Date" needs to be filled in with a valid date.'); f.originalDate.focus(); return false}}
// -->
</script>
<form action="" onsubmit="return validate(this)">
<div>
<label>Rescheduled?<br>
<select name="rescheduled">
<option value="true">Yes</option>
<option value="">No</option>
</select></label>
<label>Original Date<br><input type="text" name="originalDate" onchange="this.value = new Date(this.value).toDateString()"></label>
<button type="submit">Submit</button>
</div>
</form>
pettyc
07-12-2003, 04:17 PM
Wow - that was fast. Thank you very much for your help.
I'm sure I am doing something wrong but I am having a problem getting the script to work. Maybe its because I'm trying to use it with Cold Fusion but the form will still submit even if the date is not entered.
I created a test page if you want to see it.
http://www.friisassociates.com/testform.cfm