PDA

View Full Version : i need help with editing this unique validation script



theshiningeagle
07-09-2010, 10:51 PM
///////////////////////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
////////////




<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>