How to validate a form field based on another

[swood]

I'd like to find out how to Javascript a form field validation in a web form. I've got a drop down, Yes/No field that I want to make sure a user enters a date in another field if they choose Yes in the drop down field, otherwise, all is ok and the form can get submitted.

[havik]

Here's code I got to work similiar to what you want:

<script language="JavaScript">

function validate_form(){

validForm=true;

if(document.someform.test.value == 'yes') {
if(document.someform.date.value == '') {
alert("Please fill out the date");
validForm=false;
}
}


return validForm;

}

</script>

<form name="someform">

<select name="test">
<option value="yes">Yes
<option value="no">no
</select>
<br><br>
Date:<input name="date" type=textbox size=20>
<br><br>
<input type="submit" value="submit" onclick="return validate_form();">

</form>

[Vladdy]

Let me start by pointing out that drop down box is hardly appropriate for a yes/no answer. Since a yes/no is a binary response, a checkbox is the way to go.
Then your form tag would have:
<form ... onsubmit="validate(this)">
and validate function would look like that
function validate(form)
{ if(form.elements['yourcheckboxname'].checked)
{ //perform date validation here return false if error
}
return true;
}

Also make sure you have a back up validation on the server in case the user has javascript disabled.

[Vladdy]

Originally posted by havik
Here's code I got to work similiar to what you want:

<script language="JavaScript">

function validate_form(){

validForm=true;

if(document.someform.test.value == 'yes') {
this is an IE shortcut that may not work in future browser releases. Learn DOM compliant ways of accessing document elements
if(document.someform.date.value == '') {
testing for an empty field does not validate the date. As written it will allow any gibberish to go through.
alert("Please fill out the date");
validForm=false;
}
}


return validForm;

}

</script>

<form name="someform">

<select name="test">
<option value="yes">Yes
<option value="no">no
</select>
<br><br>
Date:<input name="date" type=textbox size=20>
<br><br>
<input type="submit" value="submit" onclick="return validate_form();">
correct way to use validation is attaching the function to form's onsubmit event. onclick event on the submit button can be easily bypassed.

</form>

[swood]

That's just the ticket! It works fine!

Thanks for the help!

[havik]

Glad I could help.

I realize that the code is simple and doesn't correctly validate a date but it gets the job done and could be built upon to validate the date correctly. C'mon, we hafta let them do some of the work :D

Havik

[swood]

Absolutely - they need to do something! Right now I'm trying to incorporate the code into an existing form that has a submit button. Is it very difficult to add the validation without its own submit?

[havik]

First of all, do you have the code inserted yet? It shouldn't be too difficult. The variable someform is the name of your form so replace it with the name. Test is the name of the select box and date is the name of the text box.

As to your question. I'm not sure what you mean. To validate the date, it would require no submission what-so-ever. Just some javascript code to replace what I initially wrote as:

if(document.someform.date.value == '')

Here are some great date validation scripts:

http://javascript.internet.com/forms/val-date.html

http://javascript.internet.com/forms/validation-universal-date.html

Havik