SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery form validations

    Hi! I am totaly new to javascript and would like to know how to do form validations through it.Here is my code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <meta name="description" content="" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
    jQuery(function($){
    		   
    	// simple jQuery validation script
    	$('#login').submit(function(){
    		
    		var valid = true;
    		var errormsg = 'This field is required!';
    		var errorcn = 'error';
    		
    		//match email address
    		var emailRegex = /'^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$'/;
    		//select integers only
    		var intRegex = /[0-9 -()+]+$/;
    		//match elements that could contain a phone number
    		var phoneNumber = /[0-9-()+]{3,20}/;
    		//match date in format yyyy-mm-dd
    		var dateyyyymmddRegex = '/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/;';
    
    		
    		$('.' + errorcn, this).remove();			
    		
    		$('.required', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' ){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    		
    		
    		$('#login_email', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' || !this.value.match(emailRegex)){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    		
    		
    	
    		
    		
    			$('.phone', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' || !$(this).val().match(phoneNumber)  || !this.value.match(intRegex)){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    		
    					$('.date', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' || !$(this).val().match(dateyyyymmddRegex)){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    
    
    		return valid;
    
    	});
    	
    })	
    </script>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
    <form id="login" method="post" action=""> 
        <div>
        	<label for="login_username">Username</label> 
        	<input type="text" name="username" id="login_username" class="field required" title="Please provide your username" />
        </div>			
    
        <div>
        	<label for="login_password">Password</label>
        	<input type="password" name="password" id="login_password" class="field required" title="Password is required" />
        </div>	
            <div>
        	<label for="login_email">Email</label>
        	<input type="text" name="email" id="login_email" class="field email" title="Email is required.Check format" />
        </div>	
                <div>
        	<label for="login_phone">Phone No</label>
        	<input type="text" name="phone" id="login_phone" class="field phone" title="Phone is required.Enter 10 numerics" />
        </div>		
                    <div>
        	<label for="login_date">Date yyyy-mm-dd</label>
        	<input type="text" name="date" id="login_date" class="field date" title="Date is required.Enter yyyy-mm-dd format" />
        </div>			
    	
       			
        <div class="submit">
            <button type="submit">Log in</button>   
        </div>
    </form>	
    </body>
    </html>
    As you can see,function works perfect for the required fields.But other fields error messages are still displayed even the values are correct.Can anyone tell me where I am going wrong?
    It's easy once you know how...

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    As you can see,function works perfect for the required fields.But other fields error messages are still displayed even the values are correct.Can anyone tell me where I am going wrong?
    In your email/date/phone methods, you are checking if the field value is empty, and showing an error message if the field is empty.

    Normally if a field is not required, it's okay for the field to be empty. No error message needs to be shown if a non-required field is empty.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well corrected some typos and now it works fine.Like in date field, I want to check the field is not empty and matches given criteria.
    HTML Code:
    <script>
    jQuery(function($){
    		   
    	// simple jQuery validation script
    	$('#login').submit(function(){
    		
    		var valid = true;
    		var errormsg = 'This field is required!';
    		var errorcn = 'error';
    		
    		//match email address
    		var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    		//select integers only
    		var intRegex = /[0-9 -()+]+$/;
    		//match elements that could contain a phone number
    		var phoneNumber = /[0-9-()+]{3,20}/;
    		//match date in format yyyy-mm-dd
    		var dateyyyymmddRegex = /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
    
    		
    		$('.' + errorcn, this).remove();			
    		
    		$('.required', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' ){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    		
    		
    		$('.email', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' || !$(this).val().match(emailRegex)){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    		
    		
    	
    		
    		
    			$('.phone', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' || !$(this).val().match(phoneNumber) || $(this).val().length!=10 ){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    		
    					$('.date', this).each(function(){
    			var parent = $(this).parent();
    			if( $(this).val() == '' || !$(this).val().match(dateyyyymmddRegex)){
    				var msg = $(this).attr('title');
    				msg = (msg != '') ? msg : errormsg;
    				$('<span class="'+ errorcn +'">'+ msg +'</span>')
    					.appendTo(parent)
    					.fadeIn('fast')
    					.click(function(){ $(this).remove(); })
    				valid = false;
    			};
    		});
    
    
    		return valid;
    
    	});
    	
    })	
    </script>
    It's easy once you know how...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •