Problem with Validation

[atrum]

Ok, so I have a simple validation script that goes through and checks that the fields meet the forms requirements, and everything works. Sorta.

 

Once the process gets to the email validation it seems to work and the error is displayed, but if you click the button a second time the error goes away, click again and its back.

(you have to fill everything in up to the email point. I have not made this very fluid or friendly yet.)

What is causing this toggle effect.

 

Here is the page for people wanting to test it out.

 

http://dev.team-symbiosis.net/?p=login

Here is the JavaScript

(there is some jquery thrown in probably not needed)

//Register
	$('.error').hide(); //Hide the errors until needed.
	//Begin Validate Email.
	function valEmail(email){
		var pattern = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/g
		if(pattern.test(email)){
			return true;
		}else{
			return false;
		}
	}
	//end: Validate Email.
	function valReg(){
		var usr = $('#txt_username').val();
		var pas = $('#txt_password').val();
		var cpas = $('#txt_cpassword').val();
		var eml = $('#txt_email').val();
		var ceml = $('#txt_cemail').val();

		if(usr == "" || usr == null){
			$('#username_error').show();
			return false;
		}else{
			$('#username_error').hide();
		}

		if(pas == "" || pas.length < 5 || pas == null){
			$('#password_error').show();
			return false;
		}else{
			$('#password_error').hide();
		}

		if(cpas !== pas){
			$('#cpassword_error').show();
			return false;
		}else{
			$('#cpassword_error').hide();
		}

		if(valEmail(eml) !== true){
			$('#email_error').show();
			return false;
		}else{
			$('#email_error').hide();
		}

		if(eml !== ceml){
			$('#cemail_error').show();
			return false;
		}else{
			$('#cemail_error').hide();
		}
	}

	$('#btn_register').click(function() {
		valReg();	
	});
	//end: Register

Here is the markup.

 

<form id="register" name="register" method="post">
		<dl>
			<dt><label for="txt_username">Username:</label></dt>
				<dd><input type="text" name="txt_username" id="txt_username" /></dd>
				<label class="error" for="txt_username" id="username_error">This field is required.</label>
			</dl>
		<dl>
			<dt><label for="txt_password">Password:</label></dt>
				<dd><input type="password" name="txt_password" id="txt_password" /></dd>
				<label class="error" for="txt_password" id="password_error">The password is too short.</label>
		</dl>
		<dl>
			<dt><label for="txt_cpassword">Confirm Password:</label></dt>
				<dd><input type="password" name="txt_cpassword" id="txt_cpassword" /></dd>
				<label class="error" for="txt_cpassword" id="cpassword_error">The passwords do not match.</label>
		</dl>
		<dl>
			<dt><label for="txt_email">Email:</label></dt>
				<dd><input type="text" name="txt_email" id="txt_email" /></dd>
				<label class="error" for="txt_email" id="email_error">Invalid email address.</label>
		</dl>
		<dl>
			<dt><label for="txt_cemail">Confirm Email:</label></dt>
				<dd><input type="text" name="txt_cemail" id="txt_cemail" /></dd>
				<label class="error" for="txt_cemail" id="cemail_error">The emails do not match.</label>
		</dl>
		<dl><input type="button" id="btn_register" value="Complete" /></dl>
	</form><!--end: login-->

 

 

[atrum]

Just giving this a quick bump. I am trying not to be impatient, this problem is just really making me scratch my head.

[atrum]

Giving this another bump.

 

I have figured out a way around the problem, but I am still eager to figure out why exactly the above script fails because I do not understand and would like to.