Solved

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

Posted on 2004-08-23
10
1 solution
730 Views
Last Modified: 2008-05-07
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...
0
Comment
Question by:andreni78
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 4
  • 4
  • 2
10 Comments
 

Author Comment

by:andreni78
ID: 11868092
<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
 
LVL 15

Accepted Solution

by:
Colosseo earned 500 total points
ID: 11868200
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: 11868571
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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Claim Your Free POC
 

Author Comment

by:andreni78
ID: 11868970
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: 11869036
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: 11869056
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: 11873624
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: 11873900
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: 11874347
Thank you for your help Scott
0
 
LVL 15

Expert Comment

by:Colosseo
ID: 11878709
Your welcome

Cheers

Scott
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Learn More
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Javascript number formating
Article by: Ivo
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Improved Form Tokens to Guard Against CSRF and Screen Scrapers
Article by: Ray
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Introduction to jQuery (Part 1)
Video by: Jason
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Introduction to jQuery (Part 2)
Video by: Jason
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Advertise Here
Suggested Courses

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

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here