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

If someone can add a disable submit button feature to this validation script if validation is passed.. make sure it doesn't disable the button if there are errors... thanks!
The script will available in the next post...
andreni78Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
ColosseoConnect With a Mentor Commented:
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
 
andreni78Author Commented:
<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");
<!-- for select list form, uses "dontselect=0" -->
 frmvalidator.addValidation("name1","dontselect=0","Select list error message");
<!-- "req" is for required entry for inputbox -->
 frmvalidator.addValidation("name2","req","inputbox error message");
<!-- "minlen=#" is minimum length requirement -->
 frmvalidator.addValidation("name3","minlen=3", "inputbox minimum length error message");
<!-- "selone" is for radio box requirement selection -->
 frmvalidator.addValidation("name4","selone","Radio box error message");
<!-- "selmin" is for checkbox requirement -->
 frmvalidator.addValidation("name5","selmin=1","checkbox error message");
</script>
</body>
</html>
0
 
ZvonkoSystems architectCommented:
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Access It Now
 
andreni78Author Commented:
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
 
ZvonkoSystems architectCommented:
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
 
ColosseoCommented:
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
 
andreni78Author Commented:
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
 
ColosseoCommented:
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
 
andreni78Author Commented:
Thank you for your help Scott
0
 
ColosseoCommented:
Your welcome

Cheers

Scott
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.