Help with JS+jQuery script validation

My question is how can I change the name of the class of the element (a text input field) with the id "serr" so that when the class name of that element (which is inside of a td - class="ec") is "show" it validates the fields inside the conditional and when the class name is "hide" it ignores the validation of them. The class name of the element needs to be initially set to "hide".

You can view the whole source code/live website here
I have tried and read here and there possible solutions with no success.

	<script type="text/javascript">
		$(document).ready(function() {
			$('.ec').hide();
			$('#serr').addClass('hide');
									
			$('.es').click(function() {
				var id = $(this).attr('id');
				
				if(id == 'sr' && sr.checked) {
					$('.ec').show();
					$('#serr').removeClass('hide').addClass('show');
				}
				else
				{
					$('.ec').hide();
					$('#serr').removeClass('show').addClass('hide');
				}
			});
		});
	</script>
	<tr class="ec">
		<td class="campo_der">* Salon de Eventos Requerido: </td>
		<td class="campo_der">
			<select id="serr" name="serr">
				<option value="Los Soles" selected="selected">Los Soles</option>
				<option value="Nogal">Nogal</option>
				<option value="Los Pinos">Los Pinos</option>
			</select>
		</td>
	</tr>
......................
<script type="text/javascript">
var frmvalidator  = new Validator("habitacion");
frmvalidator.addValidation("te","req","Ingrese el tipo de evento.");
frmvalidator.addValidation("te","alpha_s","Ingrese solo letras y/o espacios.");
frmvalidator.addValidation("ndp","req","Ingrese el número de personas.");
frmvalidator.addValidation("ndp","num","Ingrese un número.");
frmvalidator.addValidation("from","req","Escoga una fecha de inicio.");
frmvalidator.addValidation("to","req","Escoga una fecha de término.");
if (document.getElementById("serr").className=="show") {
frmvalidator.addValidation("ndpr","req","Ingrese el número de personas.");
frmvalidator.addValidation("ndpr","num","Ingrese un número.");
frmvalidator.addValidation("from2","req","Escoga una fecha de inicio.");
frmvalidator.addValidation("to2","req","Escoga una fecha de término.");
}
</script>
.....

Code (markup):

Thank you.

 

So doyu have any idea on how can I solve my problem? I have searched for hours and nothing.

 

Javascript gives me an error on line 38:

sr is not defined

  if(id == 'sr' && sr.checked) { 

Code (markup):

 

Hm but the .hide() and . show() inside that conditional work as expected. I think the problem is with the way i'm changing the class name or the way im fetching/checking it in the conditional.

 

Actually it doesn't work for me, when I click between Si/No .es checkboxes it just triggers the error, and nothing shows/hides.
Also these validation rules are executed before jQuery hide/show lines, so the condition will always be false, as #serr doesn't have any class yet.

 

Well, the show/hide works with Chrome.So what can I do to solve all of these issues? Something cross-compatible. Thank you in advance.

 

Change

  if(id == 'sr' && sr.checked) {

Code (markup):

to

if(id == 'sr' && $(this).is(':checked')) {

Code (markup):

to fix the error.

You can try with removing validation rules on the certain fields while they're hidden, and then re-adding them when needed.
On document ready they would be unset, as elements are hidden, so you would need to trigger addValidation() after checkbox change. If the other checkbox is clicked you would unset those rules again.
Read and understand what add_validation() function does in gen_validatorv4.js and try to reverse it to achieve removal of the validation rules.

 

Thank you very much babushkyn.
PD: Mods, you can close this thread.