Results 1 to 1 of 1

Thread: i need help with editing this unique validation script

  1. #1
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default i need help with editing this unique validation script

    ///////////////////////intro////////////////////////

    i got this code from a website
    actually it is very nice and unique to the other validation scripts

    in this script u only add required=1 to the field u want to make the validation work

    and the most unique thing which i didnt see in my validation search for more than 1 month is that it gives u red color for all the fields and when u finish the red color become a green color
    u will tell me that there is another scripts that do this i will tell u no
    cuz this gives u all red required color without even click on the field
    so this is well help if a user forgot a field he will see it red even if he didnt click on that field (which is a bug in most validation scripts out there)
    and like that the user will not have click on the field or click submit to see the missing field

    ////////////////////////////////////////////////////////////////////
    now what i need help in is
    that i want to make a x image next to the field + that red border
    and want to make right image apears when the field is ok and finished

    i tried alot but i faild i dont know why and i dont know mush about javascript and css

    the second thing i want to do is to edit this script to make it work for checkboxs and textarea

    //////////////////////////////////////////////////////////////////////

    the script
    ////////////
    Code:
    
    <style type="text/css">
    
    body{
    	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
    	background-color:#FFF;
    	font-size:0.9em;
    
    }
    	
    /* General styling for both valid and invalid input */
    .invalidInput,.validInput{
    	display:compact;
    	padding:1px;
    }
    /* Style for invalid input */
    .invalidInput{
    	border:3px solid #F00;
    }
    
    /* Style for valid input */
    .validInput{
    	border:3px solid #48AB4B;
    }
    </style>
    <script type="text/javascript">
    /************************************************************************************************************
    (C) www.dhtmlgoodies.com, February 2006
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
    
    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.
    
    Thank you!
    
    www.dhtmlgoodies.com
    Alf Magne Kalleland
    
    ************************************************************************************************************/	
    	
    	
    // Patterns
    var formValidationMasks = new Array();
    formValidationMasks['email'] = /\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi;	// Email
    formValidationMasks['numeric'] = /^[0-9]+$/gi;	// Numeric
    formValidationMasks['zip'] = /^[0-9]{5}\-[0-9]{4}$/gi;	// Numeric
    
    var formElementArray = new Array();
    
    /* These two event functions are from http://ejohn.org/apps/jselect/event.html */
    
    function addEvent( obj, type, fn ) { 
      if ( obj.attachEvent ) { 
        obj['e'+type+fn] = fn; 
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );} 
        obj.attachEvent( 'on'+type, obj[type+fn] ); 
      } else 
        obj.addEventListener( type, fn, false ); 
    } 
    function removeEvent( obj, type, fn ) { 
      if ( obj.detachEvent ) { 
        obj.detachEvent( 'on'+type, obj[type+fn] ); 
        obj[type+fn] = null; 
      } else 
        obj.removeEventListener( type, fn, false ); 
    } 
    
    
    function validateInput(e,inputObj)
    {
    	if(!inputObj)inputObj = this;		
    	var inputValidates = true;
    	
    	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false;
    	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0){
    		inputValidates = false;
    	}
    	if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;
    
    	if(formElementArray[inputObj.name]['freemask']){
    		var tmpMask = formElementArray[inputObj.name]['freemask'];
    		tmpMask = tmpMask.replace(/-/g,'\\-');
    		tmpMask = tmpMask.replace(/S/g,'[A-Z]');
    		tmpMask = tmpMask.replace(/N/g,'[0-9]');
    		tmpMask = eval("/^" + tmpMask + "$/gi");
    		if(!inputObj.value.match(tmpMask))inputValidates = false
    	}	
    	
    	if(formElementArray[inputObj.name]['regexpPattern']){
    		var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);
    		if(!inputObj.value.match(tmpMask))inputValidates = false
    	}
    	if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true;
    	
    	
    	if(inputValidates){
    		inputObj.parentNode.className='validInput';
    	}else{
    		inputObj.parentNode.className='invalidInput'
    	}
    }
    
    function isFormValid()
    {
    	var divs = document.getElementsByTagName('DIV');
    	for(var no=0;no<divs.length;no++){
    		if(divs[no].className=='invalidInput')return false;
    	}
    	return true;	
    }
    
    
    
    
    function initFormValidation()
    {
    	var inputFields = document.getElementsByTagName('INPUT');
    	var selectBoxes = document.getElementsByTagName('SELECT');
    	
    	var inputs = new Array();
    	
    	
    	for(var no=0;no<inputFields.length;no++){
    		inputs[inputs.length] = inputFields[no];
    		
    	}	
    	for(var no=0;no<selectBoxes.length;no++){
    		inputs[inputs.length] = selectBoxes[no];
    		
    	}
    	
    	for(var no=0;no<inputs.length;no++){
    		var className = inputs[no].parentNode.className;
    		if(className && className.indexOf('validInput')>=0)continue;			
    		var required = inputs[no].getAttribute('required');
    		if(!required)required = inputs[no].required;		
    		
    		var mask = inputs[no].getAttribute('mask');
    		if(!mask)mask = inputs[no].mask;
    		
    		var freemask = inputs[no].getAttribute('freemask');
    		if(!freemask)freemask = inputs[no].freemask;
    		
    		var regexpPattern = inputs[no].getAttribute('regexpPattern');
    		if(!regexpPattern)regexpPattern = inputs[no].regexpPattern;
    		
    		var div = document.createElement('DIV');
    		div.className = 'invalidInput';
    		inputs[no].parentNode.insertBefore(div,inputs[no]);
    		div.appendChild(inputs[no]);
    		div.style.width = inputs[no].offsetWidth + 'px';
    		
    		addEvent(inputs[no],'blur',validateInput);
    		addEvent(inputs[no],'change',validateInput);
    		addEvent(inputs[no],'paste',validateInput);
    		addEvent(inputs[no],'keyup',validateInput);
    		
    	
    		formElementArray[inputs[no].name] = new Array();
    		formElementArray[inputs[no].name]['mask'] = mask;
    		formElementArray[inputs[no].name]['freemask'] = freemask;
    		formElementArray[inputs[no].name]['required'] = required;
    		formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;
    
    		validateInput(false,inputs[no]);
    			
    	}	
    }
    
    window.onload = initFormValidation;
    
    </script>
    
    
    
    
    <form action="dhtml-form-validation.html" method="post" onsubmit="if(isFormValid())alert('Everything is ok'); else { alert('Something is wrong');return false; }">
    <fieldset>
    	<legend>Dynamic form validation</legend>
    	<table>
    		<tr>
    			<td><label for="input1">First name:</label></td>
    			<td><input name="input1" id="input1" type="text" required="1" value=""></td>
    			<td>Required = 1</td>
    		</tr>
    		<tr>
    			<td><label for="input2">Last name:</label></td>
    			<td><input name="input2" id="input2" type="text" required="1" value=""></td>
    			<td>Required = 1</td>
    		</tr>
    		<tr>
    			<td><label for="email">Email:</label></td>
    			<td><input name="email" id="email" mask="email" type="text" size="30" required="1" value=""></td>
    			<td>Required = 1, mask = email</td>
    		</tr>
    		<tr>
    			<td><label for="age">Age:</label></td>
    			<td><input name="age" id="age" mask="numeric" type="text" required="1" value="" size="3" maxlength="3"></td>
    			<td>Required = 1, mask = numeric</td>
    		</tr>
    		<tr>
    			<td><label for="code">Code(SSSS-NN):</label></td>
    			<td><input name="code" id="code" freemask="SSSS-NN" type="text" required="1" value="" size="8" maxlength="7"></td>
    			<td>Required = 1, freemask = SSSS-NN i.e four letters and two digits</td>
    		</tr>	
    		<tr>
    			<td><label for="zipcode">Zip code(NNNNN-NNNN):</label></td>
    			<td><input name="zipcode" id="zipcode" mask="zip" type="text" required="1" value="" size="11" maxlength="10"></td>
    			<td>Required = 1, mask = zip</td>
    		</tr>		
    		<tr>
    			<td><label for="zipcode">Domain:</label></td>
    			<td><input name="domain" required="1" id="domain" regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" size="30"  type="text" value=""></td>
    			<td>regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi"</td>
    		</tr>	
    		<tr>
    			<td>Country</td>
    			<td><select name="country" required="1">
    				<option value=""></option>
    				<option value="Norway">Norway</option>
    				<option value="Denmark">Denmark</option>
    				<option value="Sweden">Sweden</option>
    				<option value="Finland">Finland</option>
    				<option value="France">France</option>
    				<option value="United States">United States</option>
    				<option value="Germany">Germany</option>
    				</select>
    			</td>
    			<td>Required = 1</td>
    		</tr>
    		<tr>
    			<td><input type="submit" value="Send"></td>
    		</tr>
    	</table>
    </fieldset>
     </form>
    Last edited by jscheuer1; 07-10-2010 at 03:12 AM. Reason: format code

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
  •