normally, you would do this using an other field where the value is set to blank:
<option value="">other</option>
then use required not blank validation on the select list.
The order of the validation should be:
1) Required / Not Blank / Selection made - select list
2) conditional validation - Trigger = select list, Tagert = text box, if trigger os valid = Stop validation on tager
3) Required / not Blank Selection made - Text box
4) Show validation errors
i am including a small sample to demonstrate.
<!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>Untitled Document</title>
<script type="text/javascript">
<!--
function WAtrimIt(theString,leaveLeft,leaveRight) {
if (!leaveLeft) {
while (theString.charAt(0) == " ")
theString = theString.substring(1);
}
if (!leaveRight) {
while (theString.charAt(theString.length-1) == " ")
theString = theString.substring(0,theString.length-1);
}
return theString;
}
function WAFV_GetValueFromInputType(formElement,inputType,trimWhite) {
var value="";
if (inputType == "select") {
if (formElement.selectedIndex != -1 && formElement.options[formElement.selectedIndex].value && formElement.options[formElement.selectedIndex].value != "") {
value = formElement.options[formElement.selectedIndex].value;
}
}
else if (inputType == "checkbox") {
if (formElement.length) {
for (var x=0; x<formElement.length ; x++) {
if (formElement[x].checked && formElement[x].value!="") {
value = formElement[x].value;
break;
}
}
}
else if (formElement.checked)
value = formElement.value;
}
else if (inputType == "radio") {
if (formElement.length) {
for (var x=0; x<formElement.length; x++) {
if (formElement[x].checked && formElement[x].value!="") {
value = formElement[x].value;
break;
}
}
}
else if (formElement.checked)
value = formElement.value;
}
else if (inputType == "radiogroup") {
for (var x=0; x<formElement.length; x++) {
if (formElement[x].checked && formElement[x].value!="") {
value = formElement[x].value;
break;
}
}
}
else if (inputType == "iRite") {
var theEditor = FCKeditorAPI.GetInstance(formElement.name) ;
value = theEditor.GetXHTML(true);
}
else {
var value = formElement.value;
value=value.replace(/<p>(\&\#160\;)*<\/p>/,"");
}
if (trimWhite) {
value = WAtrimIt(value);
}
return value;
}
function WAAddError(formElement,errorMsg,focusIt,stopIt) {
if (document.WAFV_Error) {
document.WAFV_Error += "\n" + errorMsg;
}
else {
document.WAFV_Error = errorMsg;
}
if (!document.WAFV_InvalidArray) {
document.WAFV_InvalidArray = new Array();
}
document.WAFV_InvalidArray[document.WAFV_InvalidArray.length] = formElement;
if (focusIt && !document.WAFV_Focus) {
document.WAFV_Focus = focusIt;
}
if (stopIt == 1) {
document.WAFV_Stop = true;
}
else if (stopIt == 2) {
formElement.WAFV_Continue = true;
}
else if (stopIt == 3) {
formElement.WAFV_Stop = true;
formElement.WAFV_Continue = false;
}
}
function WAValidateRQ(formElement,errorMsg,focusIt,stopIt,trimWhite,inputType) {
var isValid = true;
if (formElement.length && inputType.toLowerCase()!="radio" && inputType.toLowerCase()!="select") formElement=formElement[0];
if (!document.WAFV_Stop && !formElement.WAFV_Stop) {
var value=WAFV_GetValueFromInputType(formElement,inputType,trimWhite);
if (value == "") {
isValid = false;
}
}
if (!isValid) {
WAAddError(formElement,errorMsg,focusIt,stopIt);
}
}
function WAValidateCD(triggerElement,targetElement,enable) {
var isValid = true;
var invalidArray = document.WAFV_InvalidArray;
if (invalidArray) {
if (triggerElement == document)
isValid = false;
else {
for (var x=0; x<invalidArray.length && isValid; x++) {
if (invalidArray[x]==triggerElement) {
isValid = false;
}
}
}
}
if (!isValid) {
enable = !enable;
}
if (targetElement.length) targetElement=targetElement[0];
if (enable) {
targetElement.WAFV_Stop = false;
}
else {
targetElement.WAFV_Stop = true;
}
document.WAFV_Focus = false;
document.WAFV_Error = false;
document.WAFV_InvalidArray = false;
}
function WAAlertErrors(errorHead,errorFoot,setFocus,submitForm,allowOverride) {
if (!document.WAFV_StopAlert) {
document.WAFV_StopAlert = true;
if (document.WAFV_InvalidArray) {
document.WAFV_Stop = true;
var errorMsg = document.WAFV_Error;
if (errorHead!="")
errorMsg = errorHead + "\n" + errorMsg;
if (errorFoot!="")
errorMsg += "\n" + errorFoot;
document.MM_returnValue = false;
if (document.WAFV_Error!="") {
if (allowOverride) {
if (confirm(errorMsg.replace(/"/g,'"'))) {
document.MM_returnValue = true;
return;
}
}
else {
alert(errorMsg.replace(/"/g,'"'));
}
}
else if (submitForm)
submitForm.submit();
if (setFocus && document.WAFV_Focus) {
if (document.getElementById(document.WAFV_Focus.name+"___Config") && document.WAFV_Focus.type.toLowerCase() == "hidden") {
var theEditor = FCKeditorAPI.GetInstance(document.WAFV_Focus.name);
theEditor.EditorWindow.focus();
setTimeout("setTimeout('document.WAFV_Stop = false;document.WAFV_StopAlert = false;',1)",1);
}
else {
document.tempFocus = document.WAFV_Focus;
setTimeout("document.tempFocus.focus();setTimeout('document.WAFV_Stop = false;document.WAFV_StopAlert = false;',1)",1);
}
}
else {
document.WAFV_Stop = false;
document.WAFV_StopAlert = false;
}
for (var x=0; x<document.WAFV_InvalidArray.length; x++) {
document.WAFV_InvalidArray[x].WAFV_Stop = false;
}
}
else {
document.WAFV_Stop = false;
document.WAFV_StopAlert = false;
if (submitForm) {
submitForm.submit();
}
document.MM_returnValue = true;
}
document.WAFV_Focus = false;
document.WAFV_Error = false;
document.WAFV_InvalidArray = false;
}
}
//-->
</script>
</head>
<body>
<form action="" method="post" name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.select,'- Select Entry is required',document.form1.select,0,true,'select');WAValidateCD(document.getElementById('form1').select,document.getElementById('form1').textfield,false);WAValidateRQ(document.form1.textfield,'- textfield Entry is required',document.form1.textfield,0,false,'text');WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,document.getElementById('false'),false);return document.MM_returnValue">
<select name="select" id="select">
<option value="">other</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="Submit" />
</form>
</body>
</html>