How to validate a select box.

[Dave0291]

Hi there,

I'm having some trouble validating the choice of my select box with javaScript. Essentially, there are 3 choices ("" with a value of -2, "Approved" with a value of 1 and "Pending" with a value of 0. And when someone chooses the "" (-2) option, I would like to display a message near the select box to notify users that they must pick another choice.

This is my code:

      
function setValidationInvalidFundingSrc(msg){
	validationMsgInvalidFundingSrc = msg;
}

function fundingStatusLoseFocus(rCounter){

	if($('#source_other_Amount_status_'+rCounter).val() == -2){
		showErrorMessage(validationMsgInvalidFundingSrc,'#source_other_Amount_status_'+rCounter);
	}		

}

function showErrorMessage(message,id){
	$('#invalidDigit').remove();
	$(id).after("<div id='invalidDigit' style='color:red'>"+message+" &nbsp;</div>");		
	$('#DraftBT').attr('disabled', 'true');
	$('#SubmitBT').attr('disabled', 'true');
}

//This is the html from another page						

"<td align='center'><select class='required' id='source_other_Amount_status_"+rowCounter+"' name='source_other_Amount_status_"+rowCounter+"' value='Status'><option value='-2' onblur='fundingStatusLoseFocus("+rowCounter+")'></option><option value='1'>"+approved+"</option><option value='0'>"+pending+"</option></select></td>"

Thanks!

[Dormilich]

if "" is an invalid choice anyway, why letting the user choose it at all? wouldn’t it be easier to only have the 2 valid choices available?

[Dave0291]

It's because the customer wants the users to pick and not skip over this option as it is very important. The "" option is the default choice and the user needs to select either Approved or Pending to complete their application.

[Dormilich]

then set the "" option simply to disabled. then it can’t be selected.

[Dave0291]

I wish I could do that. They have specified that they want a message to pop up and notify the user if the "" option is selected.

[Dormilich]

well, you still can set the disabled property via JavaScript … (though you should pass a boolean, not a string)

other than that you would hook into the <select>’s blur or change event and check what the value is. if you get -2, alert the message.