Solved

Validation Script: Error Formatting will only go back to normal if input is correct

Posted on 2004-08-23
18
307 Views
Last Modified: 2008-02-01
The script will be available in the next post...
Can anyone make the error formatting back to normal only if the input is correct?
0
Comment
Question by:andreni78
  • 10
  • 7
18 Comments
 

Author Comment

by:andreni78
ID: 11868420
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;
   } else {
     document.getElementById("Submit").disabled=true;
   }


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

USAGE:

<form name="myform">
<select name="name1">
<option>One
<option>Two
<option>Three
</select>
<input type=text name="name2">
<input type=text name="name3">
<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>
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11871788
What do you mean make the error message to normal only if the input is correct?
0
 

Author Comment

by:andreni78
ID: 11873603
not error message to normal.. error formatting to normal... currently if the user hits submit with errors on the form, the input fields turns red and text will turn white if there's text in the input fields.. so i want these error fields to remain red and text white until the user inputs correctly.. for example.. if the user enters email wrong for example just "user".. the email field will have red background with white text.. if the user enters user@mail   then the input field will still remain red background/white text.. until the user hits the types completely "user@mail.com" - only then the input field error formatting will revert back to normal - telling the user s/he has finally entered the input field correctly...

any other questions/suggestions?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11873734
Let me get this straight. Currently, the script should make the FIRST error field have the red background and get focused. Do you want the fields to remain red until the user resubmits the form or right after he/she types something or selects something?
0
 

Author Comment

by:andreni78
ID: 11874332
Currently.. the script formats all error fields red background/white text and focuses on the first field..
when I click on the first field again without typing anything... the error formatting (red background/white text) turns back to normal formatting..
I want it so that it doesn't turn back to normal formatting unless the input is correct..
lets say there's a social security input.. and the user inputs it incorrectly.. say 5 digits.. social security is 9 digits long..  the social security input box will remain red until the user inputs the 9th digit
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11874385
I'll be back in a few hours, take a look at it then.
0
 

Author Comment

by:andreni78
ID: 11877643
i guess this isn't possible - or way too time consuming...
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11877808
No, I actually just got back. I'll check it out now.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 36

Expert Comment

by:Zyloch
ID: 11877981
Is it alright if I post tomorrow morning? It's a bit over midnight right now and I'm pretty beat. It's not that it's difficult much more that I'm still a little confused with your code (which is why I wrote another copy). If other experts answer this before me, feel free to.
0
 

Author Comment

by:andreni78
ID: 11878055
I will wait til tomorrow.. thanks for the notice
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11883055
Then this will be a little complicated if you want after the keypress with your code. Would you like me to rewrite it or just try to fit it in?
0
 

Author Comment

by:andreni78
ID: 11884903
that would be too difficult.. rewriting would also mean a lot more bugs to fix.. for example netscape.. and there are tons of features in this code.. that would take a very long time.. isn't the code modulated enough so you can reuse the code? it's OO design isn't it..
0
 

Author Comment

by:andreni78
ID: 11884908
perhaps not make it on key change.. but off focus.. would that make it any easier?
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 11885244
Yes, it is an O-O design in a sense. But Javascript isn't a truly object oriented language so it's not completely O-O. In fact, this design complicates things and might not work on some older browsers. There are codes that are a lot simpler that work just as well and are reusable.

As per your second post, the key change and off focus, both would be the same. If you want to keep your format, I'll need a complete list of fields, because they might differ slightly. For your field that you want 9 digits, you can have this:

onkeyup="if(this.value.length==9){this.style.backgroundColor='white';this.style.color='black';"
0
 

Author Comment

by:andreni78
ID: 11885669
ooh.. that's going to be messy.. that'll result in two scripts wanting to change a field... perhaps i'm asking for too much.. but i like your approach on the rewriting of the script if it makes the script faster/more efficient(as you've done in one of the previous posts).  that's going to take a long time - do you think you can make your previous code do exactly what this script does - only more efficient and with the above features? we can set certain goals and i'll give you points accordingly to each goal that you reach - that way.. you'll get points accordingly to your efforts...
0
 

Author Comment

by:andreni78
ID: 11926820
there's no solution given.. today is the fourth day..
0
 

Author Comment

by:andreni78
ID: 11929245
thanks for trying zyloch.. i'll give you points..
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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)
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now