Validation Script - Disable Submit Button if validation is passed..

Author Comment

by:andreni78

ID: 118680922004-08-23

<HTML>
<SCRIPT language="javascript">
var ORIGINAL_TEXT_COLOR = "black";
var ERROR_TEXT_COLOR = "white";
function Validator(frmname){

this.formobj=document.forms[frmname];
if(!this.formobj)
{
alert("BUG: couldnot get Form object "+frmname);
return;
}
if(this.formobj.onsubmit)
{
this.formobj.old_onsubmit = this.formobj.onsubmit;
this.formobj.onsubmit=null;
}
else
{
this.formobj.old_onsubmit = null;
}
this.formobj.onsubmit=form_submit_handler;
this.addValidation = add_validation;
this.setAddnlValidationFunction=set_addnl_vfunction;
this.clearAllValidations = clear_all_validations;
}

function set_addnl_vfunction(functionname)
{
this.formobj.addnlvalidation = functionname;
}

function clear_all_validations()
{
for(var itr=0;itr < this.formobj.elements.length;itr++)
{
this.formobj.elements[itr].validationset = null;
}
}

var errMsg;

function form_submit_handler(){
errMsg = "";
var retVal = true;
var firstFrmValidateFailedObj;

for(var itr=0;itr < this.elements.length;itr++)
{
if(this.elements[itr].validationset && !this.elements[itr].validationset.validate())
{
retVal = false;
if(typeof(firstFrmValidateFailedObj) == "undefined"){

firstFrmValidateFailedObj = this.elements[itr];
}
}
}

if(errMsg>""){
alert("Please correct these errors:"+errMsg);
if(typeof(firstFrmValidateFailedObj) != "undefined"){
firstFrmValidateFailedObj.style.color=ORIGINAL_TEXT_COLOR;
if(firstFrmValidateFailedObj.type == "text" || firstFrmValidateFailedObj.type == "textarea"){
firstFrmValidateFailedObj.select();
}
firstFrmValidateFailedObj.focus();
}
return false;
}

if(retVal && this.addnlvalidation){
str =" var ret = "+this.addnlvalidation+"()";
eval(str);
if(retVal && !ret) return ret;
}
return retVal;
}

function add_validation(itemname,descriptor,errstr)
{
if(!this.formobj)
{
alert("BUG: the form object is not set properly");
return;
}//if
var itemobj = this.formobj[itemname];

if(itemobj.length && isNaN(itemobj.selectedIndex) )
//for radio button; don't do for 'select' item
{
itemobj = itemobj[0];
}
if(!itemobj)
{
alert("BUG: Couldnot get the input object named: "+itemname);
return;
}

if(!itemobj.validationset)
{
itemobj.validationset = new ValidationSet(itemobj);
}
itemobj.validationset.add(descriptor,errstr);
}

function ValidationDesc(inputitem,desc,error)
{
this.desc=desc;
this.error=error;
this.itemobj = inputitem;
this.validate=vdesc_validate;
}

function vdesc_validate(){
if(!this.itemobj.oldColor){
this.itemobj.oldColor = "color:"+this.itemobj.style.backgroundColor;
}
if(!validateInput(this.desc,this.itemobj,this.error)){
this.itemobj.style.backgroundColor="red"
this.itemobj.style.color=ERROR_TEXT_COLOR;
this.itemobj.focus();
this.itemobj.onkeydown = function(){this.style.backgroundColor=this.oldColor.split("color:")[1];this.style.color=ORIGINAL_TEXT_COLOR};
this.itemobj.onclick = this.itemobj.onkeydown;
return false;
} else {
this.itemobj.style.backgroundColor=this.itemobj.oldColor.split("color:")[1];
return true;
}
}

function ValidationSet(inputitem)
{
this.vSet=new Array();
this.add= add_validationdesc;
this.validate= vset_validate;
this.itemobj = inputitem;
}
function add_validationdesc(desc,error)
{
this.vSet[this.vSet.length]=
new ValidationDesc(this.itemobj,desc,error);
}
function vset_validate()
{
for(var itr=0;itr<this.vSet.length;itr++)
{
if(!this.vSet[itr].validate())
{
return false;
}
}
return true;
}

/* checks the validity of an email address entered
* returns true or false
*/
function validateEmail(email)
{
var splitted = email.match("^(.+)@(.+)$");
if(splitted == null) return false;
if(splitted[1] != null )
{
var regexp_user=/^\"?[\w-_\.]*\"?$/;
if(splitted[1].match(regexp_user) == null) return false;
}
if(splitted[2] != null)
{
var regexp_domain=/^[\w-\.]*\.[A-Za-z]{2,4}$/;
if(splitted[2].match(regexp_domain) == null)
{
var regexp_ip =/^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/;
if(splitted[2].match(regexp_ip) == null) return false;
}// if
return true;
}
return false;
}

function TestComparison(objValue,strCompareElement,strvalidator,strError)
{
var bRet=true;
var objCompare=null;
if(!objValue.form)
{
alert("BUG: No Form object!");
return false
}
objCompare = objValue.form.elements[strCompareElement];
if(!objCompare)
{
alert("BUG: Element with name"+strCompareElement+" not found !");
return false;
}
if(strvalidator != "eqelmnt" &&
strvalidator != "neelmnt")
{
if(isNaN(objValue.value))
{
errMsg += "\n\t"+objValue.name+": Should be a number ";
return false;
}//if
if(isNaN(objCompare.value))
{
errMsg += "\n\t"+objCompare.name+": Should be a number ";
return false;
}//if
}//if
var cmpstr="";
switch(strvalidator)
{
case "eqelmnt":
{
if(objValue.value != objCompare.value)
{
cmpstr = " should be equal to ";
bRet = false;
}//if
break;
}//case
case "ltelmnt":
{
if(eval(objValue.value) >= eval(objCompare.value))
{
cmpstr = " should be less than ";
bRet = false;
}
break;
}//case
case "leelmnt":
{
if(eval(objValue.value) > eval(objCompare.value))
{
cmpstr = " should be less than or equal to";
bRet = false;
}
break;
}//case
case "gtelmnt":
{
if(eval(objValue.value) <= eval(objCompare.value))
{
cmpstr = " should be greater than";
bRet = false;
}
break;
}//case
case "geelmnt":
{
if(eval(objValue.value) < eval(objCompare.value))
{
cmpstr = " should be greater than or equal to";
bRet = false;
}
break;
}//case
case "neelmnt":
{
if(objValue.value.length > 0 &&
objCompare.value.length > 0 &&
objValue.value == objCompare.value)
{
cmpstr = " should be different from ";
bRet = false;
}//if
break;
}
}//switch
if(bRet==false)
{
if(!strError || strError.length==0)
{
strError = objValue.name + cmpstr + objCompare.value;
}//if
errMsg += "\n\t"+strError;
}//if
return bRet;
}
function TestSelMin(objValue,strMinSel,strError)
{
var bret = true;
var objcheck = objValue.form.elements[objValue.name];
var chkcount =0;
if(objcheck.length)
{
for(var c=0;c < objcheck.length;c++)
{
if(objcheck[c].checked == "1")
{
chkcount++;
}//if
}//for
}
else
{
chkcount = (objcheck.checked == "1")?1:0;
}
var minsel = eval(strMinSel);
if(chkcount < minsel)
{
if(!strError || strError.length ==0)
{
strError = "Please Select atleast"+minsel+" check boxes for"+objValue.name;
}//if
errMsg += "\n\t"+strError;
bret = false;
}
return bret;
}

function TestDontSelectChk(objValue,chkValue,strError)
{
var pass=true;
var objcheck = objValue.form.elements[objValue.name];
if(objcheck.length)
{
var idxchk=-1;
for(var c=0;c < objcheck.length;c++)
{
if(objcheck[c].value == chkValue)
{
idxchk=c;
break;
}//if
}//for
if(idxchk>= 0)
{
if(objcheck[idxchk].checked=="1")
{
pass=false;
}
}//if
}
else
{
if(objValue.checked == "1")
{
pass=false;
}//if
}//else
if(pass==false)
{
if(!strError || strError.length ==0)
{
strError = "Can't Proceed as you selected "+objValue.name;
}//if
errMsg += "\n\t"+strError;

}
return pass;
}

function TestRequiredInput(objValue,strError)
{
var ret = true;
if(eval(objValue.value.length) == 0)
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : Required Field";
}//if
errMsg += "\n\t"+strError;
ret=false;
}//if
return ret;
}

function TestMaxLen(objValue,strMaxLen,strError)
{
var ret = true;
if(eval(objValue.value.length) > eval(strMaxLen))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : "+ strMaxLen +" characters maximum ";
}//if
errMsg += "\n\t"+strError + "\n\t[Current length = " + objValue.value.length + "]";
ret = false;
}//if
return ret;
}

function TestMinLen(objValue,strMinLen,strError)
{
var ret = true;
if(eval(objValue.value.length) < eval(strMinLen))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : " + strMinLen + " characters minimum ";
}//if
errMsg += "\n\t"+strError + "\n\t[Current length = " + objValue.value.length + "]";
ret = false;
}//if
return ret;
}

function TestInputType(objValue,strRegExp,strError,strDefaultError)
{
var ret = true;

var charpos = objValue.value.search(strRegExp);
if(objValue.value.length > 0 && charpos >= 0)
{
if(!strError || strError.length ==0)
{
strError = strDefaultError;
}//if
errMsg += "\n\t"+strError + "\n\t [Error character position " + eval(charpos+1)+"]";
ret = false;
}//if
return ret;
}

function TestEmail(objValue,strError)
{
var ret = true;
if(objValue.value.length > 0 && !validateEmail(objValue.value) )
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Enter a valid Email address ";
}//if
errMsg += "\n\t"+strError;
ret = false;
}//if
return ret;
}

function TestLessThan(objValue,strLessThan,strError)
{
var ret = true;
if(isNaN(objValue.value))
{
errMsg += "\n\t"+objValue.name+": Should be a number ";
ret = false;
}//if
else
if(eval(objValue.value) >= eval(strLessThan))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : value should be less than "+ strLessThan;
}//if
errMsg += "\n\t"+strError;
ret = false;
}//if
return ret;
}

function TestGreaterThan(objValue,strGreaterThan,strError)
{
var ret = true;
if(isNaN(objValue.value))
{
errMsg += "\n\t"+objValue.name+": Should be a number ";
ret = false;
}//if
else
if(eval(objValue.value) <= eval(strGreaterThan))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : value should be greater than "+ strGreaterThan;
}//if
errMsg += "\n\t"+strError;
ret = false;
}//if
return ret;
}

function TestRegExp(objValue,strRegExp,strError)
{
var ret = true;
if( objValue.value.length > 0 &&
!objValue.value.match(strRegExp) )
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Invalid characters found ";
}//if
errMsg += "\n\t"+strError;
ret = false;
}//if
return ret;
}
function TestDontSelect(objValue,index,strError)
{
var ret = true;
if(objValue.selectedIndex == null)
{
alert("BUG: dontselect command for non-select Item");
ret = false;
}
else
if(objValue.selectedIndex == eval(index))
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Please Select one option ";
}//if
errMsg += "\n\t"+strError;
ret = false;
}
return ret;
}

function TestSelectOneRadio(objValue,strError)
{
var objradio = objValue.form.elements[objValue.name];
var one_selected=false;
for(var r=0;r < objradio.length;r++)
{
if(objradio[r].checked == "1")
{
one_selected=true;
break;
}
}
if(false == one_selected)
{
if(!strError || strError.length ==0)
{
strError = "Please select one option from "+objValue.name;
}
errMsg += "\n\t"+strError;
}
return one_selected;
}

//* Checks each field in a form
function validateInput(strValidateStr,objValue,strError)
{
var ret = true;
var epos = strValidateStr.search("=");
var command = "";
var cmdvalue = "";
if(epos >= 0)
{
command = strValidateStr.substring(0,epos);
cmdvalue = strValidateStr.substr(epos+1);
}
else
{
command = strValidateStr;
}

switch(command)
{
case "req":
case "required":
{
ret = TestRequiredInput(objValue,strError)
break;
}
case "maxlength":
case "maxlen":
{
ret = TestMaxLen(objValue,cmdvalue,strError)
break;
}
case "minlength":
case "minlen":
{
ret = TestMinLen(objValue,cmdvalue,strError)
break;
}
case "alnum":
case "alphanumeric":
{
ret = TestInputType(objValue,"[^A-Za-z0-9]",strError,objValue.name+": Only alpha-numeric characters allowed ");
break;
}
case "alnum_s":
case "alphanumeric_space":
{
ret = TestInputType(objValue,"[^A-Za-z0-9\\s]",strError,objValue.name+": Only alpha-numeric characters and space allowed ");
break;
}
case "num":
case "numeric":
{
ret = TestInputType(objValue,"[^0-9]",strError,objValue.name+": Only digits allowed ");
break;
}
case "alphabetic":
case "alpha":
{
ret = TestInputType(objValue,"[^A-Za-z]",strError,objValue.name+": Only alphabetic characters allowed ");
break;
}
case "alphabetic_space":
case "alpha_s":
{
ret = TestInputType(objValue,"[^A-Za-z\\s]",strError,objValue.name+": Only alphabetic characters and space allowed ");
break;
}
case "email":
{
ret = TestEmail(objValue,strError);
break;
}
case "lt":
case "lessthan":
{
ret = TestLessThan(objValue,cmdvalue,strError);
break;
}
case "gt":
case "greaterthan":
{
ret = TestGreaterThan(objValue,cmdvalue,strError);
break;
}
case "regexp":
{
ret = TestRegExp(objValue,cmdvalue,strError);
break;
}
case "dontselect":
{
ret = TestDontSelect(objValue,cmdvalue,strError)
break;
}
case "dontselectchk":
{
ret = TestDontSelectChk(objValue,cmdvalue,strError)
break;
}
case "selmin":
{
ret = TestSelMin(objValue,cmdvalue,strError);
break;
}
case "selone":
{
ret = TestSelectOneRadio(objValue,strError);
break;
}
//Comparisons
case "eqelmnt":
case "ltelmnt":
case "leelmnt":
case "gtelmnt":
case "geelmnt":
case "neelmnt":
{
return TestComparison(objValue,cmdvalue,command,strError);
break;
}
}//switch
return ret;
}

</SCRIPT>

<form name="myform">
<input type=text name="name3">
<input type=text name="name2">
<select name="name1">
<option>One
<option>Two
<option>Three
</select>

<input type=radio name="name4" value="One"> One
<input type=radio name="name4" value="Two"> Two
<input type=radio name="name4" value="Three"> Three
<input type=checkbox name="name5" value="One"> One
<input type=checkbox name="name5" value="Two"> Two
<input type=checkbox name="name5" value="Three"> Three
<input type=submit>
</form>

<SCRIPT language=JavaScript type="text/javascript">
var frmvalidator = new Validator("myform");

frmvalidator.addValidation("name1","dontselect=0","Select list error message");

frmvalidator.addValidation("name2","req","inputbox error message");

frmvalidator.addValidation("name3","minlen=3", "inputbox minimum length error message");

frmvalidator.addValidation("name4","selone","Radio box error message");

frmvalidator.addValidation("name5","selmin=1","checkbox error message");
</script>
</body>
</html>

0

LVL 15

Accepted Solution

by:Colosseo

Colosseo earned 2000 total points

ID: 118682002004-08-23

Hi

if you give your submit button a name

<input type=submit name="Submit">

then change this code

if(errMsg>""){
alert("Please correct these errors:"+errMsg);
if(typeof(firstFrmValidateFailedObj) != "undefined"){
firstFrmValidateFailedObj.style.color=ORIGINAL_TEXT_COLOR;
if(firstFrmValidateFailedObj.type == "text" || firstFrmValidateFailedObj.type == "textarea"){
firstFrmValidateFailedObj.select();
}
firstFrmValidateFailedObj.focus();
}
return false;
}

to

if(errMsg>""){
alert("Please correct these errors:"+errMsg);
if(typeof(firstFrmValidateFailedObj) != "undefined"){
firstFrmValidateFailedObj.style.color=ORIGINAL_TEXT_COLOR;
if(firstFrmValidateFailedObj.type == "text" || firstFrmValidateFailedObj.type == "textarea"){
firstFrmValidateFailedObj.select();
}
firstFrmValidateFailedObj.focus();
}
return false;
} else {
document.getElementById("Submit").disabled=true;
// the line below stops the submit but shows that the button is disabled (you have to remove this for the submit to complete
return false;
}

Basically if there is no error message then the validation has passed and the button is disabled

HTH

Scott

0

LVL 63

Expert Comment

by:Zvonko

ID: 118685712004-08-23

After you know the form you are handling you know also all elements on the form and also their element type.
You could scan all elements to disable all submit buttons, but stop! How would you initialize then the next input scanning? By some other feature which initialize onsubmit checks? Isn't that already the submit button? You see the dilema?

0

Author Comment

by:andreni78

ID: 118689702004-08-23

hmmm I'm not getting what you are saying...
I removed this line:
// the line below stops the submit but shows that the button is disabled (you have to remove this for the submit to complete
return false;

so the submit button will only be disabled if all fields pass validation... i've tested this and it works exactly how i wanted it...

0

LVL 63

Expert Comment

by:Zvonko

ID: 118690362004-08-23

Sorry, I have missread the question.

Ok, now if you want to disable all submit buttons after the onsubmit checks are passed you can either use the name or the id attribut of the one submit button (always prefer the name attribute before getElementById()), or you can use the scan method as I mentioned before. Are you interested in the scan method?

0

LVL 15

Expert Comment

by:Colosseo

ID: 118690562004-08-23

the return false; line was just a test to see the button disable if all fields are validated

the code should work without it and if it is working for you thats great

Scott

0

Author Comment

by:andreni78

ID: 118736242004-08-23

what is scan method? can you clarify? it will turn all buttons gray?
i'm sure if i have a reset button.. i could just add

document.getElementById("Reset").disabled=true;

below

document.getElementById("Submit").disabled=true;

is it a better method to disable the submit - less cpu intensive?

thanks!

0

LVL 15

Expert Comment

by:Colosseo

ID: 118739002004-08-23

I believe that you can actually just put

document.getElementById("Submit").disabled=document.getElementById("Reset").disabled=true;

the scan method means going through each form element.. and if it is a button or a rest or a submit then disabling it.

Seeing as you only ever have one or two buttons, I believe it is faster to just reference them directly.

Scott

0

Author Comment

by:andreni78

ID: 118743472004-08-23

Thank you for your help Scott

0

LVL 15

Expert Comment

by:Colosseo

ID: 118787092004-08-24

Your welcome

Cheers

Scott

0

COURSE of the MONTH

Validation Script - Disable Submit Button if validation is passed..

Welcome to Experts Exchange

Featured Post

Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Enjoyed your answer?

Keep in touch with Experts Exchange

Live Consultants