validate if select has a specified option

[toolman]

Hi there,

I have the following line which insets an option to the top of a select. What I would like to do is to check if this value is left as the default and return an alert or a validation message asking the user to select an option apart from the default.
 

$("select[name='ap']").prepend("<option value='' selected='selected'>Default option</option>");

What would be the best way to do this?

Thanks

 

[fastsol]

Something like this, untested.  Best thing to do is asign a valid id to the select box so you can target it much easier.  In my example I simply called it "ap".

$("#ap").prepend("<option value='' selected='selected'>Default option</option>");

if($('#ap option:selected').text() == "Default option")
{ alert('Please choose a valid option'); }

[Psycho]

Assuming that this default value is the only one with an empty value, I would suggest checking the value of the field instead of the text/label. Labels can and do change (e.g. showing different labels based on the user's preferred language), but the values should not change.

[fastsol]

Take hints from what Psycho said above.  I also thought you may need to be able to check the value on the fly as people switch between options.

$("#ap").change(function(){
  if($('#ap option:selected').text() == "Default option")
  { alert('Please choose a valid option'); }
});

[toolman]

 

Take hints from what Psycho said above.  I also thought you may need to be able to check the value on the fly as people switch between options.

$("#ap").change(function(){
  if($('#ap option:selected').text() == "Default option")
  { alert('Please choose a valid option'); }
});

 

 

Thanks this works when the user chooses another option and then selects the default, but is there a way to create the alert if the default value is left when submitting the form?

[maxxd]

You can check the value of the field on submission with something like the following completely untested code:

$('#ap').prepend("<option value='-1'>This is the default option</option>");

$('form').submit(function(e){
	e.preventDefault();
	if($('#ap').val() == -1){
		alert('Fill in the field, please.');
		return false;
	}
	...
	// continue processing
}

Of course, you'll want to check the value again during the server-side processing before you do anything with the value, like the also completely untested code below:

if($_POST['ap'] == -1){
	throw new Exception('Fill in the field, please.');
}
...
// continue processing