Forum:

HTML Pages with CSS and JavaScript

Jquery form validation

Ranch Hand

Posts: 65

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello guys
I am a beginer in jquery. For some reason Validation wont work....after() wont display error message..what could be wrong?
Thank you in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Registration</title>
		<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="/dateplugin.js"></script> 
		<link rel="stylesheet" type="text/css" href="/stylez.css"/>
		<script type="text/jscript">
		$(document).ready(function(){
		//$.dateSelectBoxes('mon','da','yea');	
		//form validation
	var hasError = false;
	var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
	var email = $("#em").val();
	var fname=$("#fn").val();
	var lname=$("#ln").val();
	var school=$("#sch").val();
	var classes=$("#clas").val();
	var grade=$("#yr").val();
	var month=$("#mon").val();
	var days=$("#da").val();
	var years=$("#yea").val();
	var pass=$("#pas").val();
	var zipcode=$("#zip").val();
	
	 $("#sign").click(function(){
	if (fname==''){
		$("#fn").after("Please enter your first name ");
		hasError=true;
	}
	
	if (lname==''){
		$("#ln").after("Please enter your last name");
		hasError=true;
	}
   
   if(school==''){
   		$("#sch").after("Please enter the name of your institution");
		hasError=true;
   }
   
   if (classes==''){
   		$("#clas").after("Please enter current classes you are taking");
		hasError=true;
   }
   
   if (month=='' || day=='' || year==''){
   		$("#mon").after("Please enter your birthday");
		hasError=true;
   }
   
   if (pass==''){
   		$("#pas").after("Please enter the password");
		hasError=true;
   }
   
   if (zipcode==''){
   		$("#zip").after("Please enter your zipcode");
		hasError=true;
   }
   
   if (grade==''){
   		$("#yr").after("Please enter the year you are in");
		hasError=true;
   }
  
   if(email == '') {
   $("#em").after("You forgot to enter the email address to send ");
   hasError = true;
  } else if(!emailReg.test(email)) {
   $("#em").after("Enter a valid email address to send to.");
   hasError = true;
  }
  
    if (hasError == true) {
		return false;
	}
	else{
		//submit form via ajax
	}
});
		
			
		});
		</script>
		
		<style type="text/css">
			
			
		
		</style>
    </head>
    <body class="fancy">
    	<form action="" method="" accept-charset="utf-8">
	   <table width="800" border="0" cellpadding="1" cellspacing="0" />
	   <tr>
        <td id="column1">
         </td>
        <td id="column2">
          <div class="Sintext"><h1>Sign Up</h1></div>
        	<div>
        <label>First Name</label>
    	<input type="text" name="fnam" class="fields" id="fn" />
		</div>	
        <div>
        <label>Last Name</label>
        <input type="text" name="lnam" class="fields" id="ln"/>
		 </div>
		 <div >
		 <label>School</label>
		 <input type="text" name="scname" class="fields" id="sch"/>
		  </div>
		  <div>
		 <label>Major</label>
		 <select id="majo" name="major">
		 	<option value="5">—undeclared—</option>
		 </select>
		 </div>
		 <div>
		 	<label>Current Classes</label>
			<input type="text" name="class" id="clas" class="fields"/>
			<span>add class field</span>
			 </div>
		<div>
			<label>Year</label>
			<select id="yr" name="year">
			  <option value="">—Select the year —</option>
			  <option value="10">Freshman </option>
			   <option value="20">Sophomore</option>
			   <option value="30">junior</option>
			   <option value="40">senior</option>
			   <option value="50">Alumni </option>
			    <option value="60">HighSchool </option>
			   </select>
		</div>
		<div >
			<label>Campus</label>
			<input type="text" name="campus" class="fields" />
		</div>
		<div >
			<label>Email</label>
			<input type="text" name="email" id="em" class="fields"/>
		</div>
		<div ">
			<label>Password</label>
			<input type="text" name="passwd" id="pas" class="fields"/>
		</div>
		<div >
			<label>Sex</label>
	<select name="sex" class="sexfield">
		<option value="3">Male</option>
		<option value="4">Female </option>
	</select>
		</div>
		<div id="bdate">
			<label>Birthday</label>
			<select id="mon" name="mont">
				<option value="0">Month</option>
				</select>
			<select id="da" name="day">
				<option value="1">Day</option>
				</select>
			<select id="yea" name="year">
				<option value="2">Year</option>
				</select>
			</div>
         <div >     
			<label>Zipcode</label>
			<input type="text" name="zipcod" id="zip" class="zipfield"/>
		</div>
		<div id="sign">
			<button type="submit" id="submitbutton"  class="sinbutton">Sign Up</button>
		</div>
        </td>
    </tr>
</table>

</form>
    </body>
</html>

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I see a number of things that could go awry. Firstly, establishing a click handler on a div around the submit button for the form in order to do validation is just, well, rather odd.

Step 1 to cleanup is to get rid of that click handler and replace it with a submit handler for the form. That's the appropriate place to do validation.

And please, next time you post your code, please fix up the indentation properly. Badly indented code is very hard to read.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

P.S. Why aren't you using the Validation Plugin rather than rolling your own?

[Asking smart questions] [About Bear] [Books by Bear]

David Mbura

Ranch Hand

Posts: 65

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you a lot Bear ...i tried to look for the plugin but i didnt find one that suits my needs,from the code ,can you suggest any validation plugin?
Thank you again!

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

[Asking smart questions] [About Bear] [Books by Bear]

No one can make you feel inferior without your consent - Eleanor Roosevelt. tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing