TextField validator : Validation : Form Control JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Form Control » Validation »

 

TextField validator




<HTML>
<HEAD>
<TITLE>jaxWidgets by Sarat Pediredla</TITLE>


<STYLE type=text/css>
BODY {
  FONT-SIZE: 0.9em; FONT-FAMILY: Arial, serif
}
{
  TEXT-DECORATION: none
}
CODE {
  CLEAR: both; DISPLAY: block; FONT-SIZE: 0.9em; FONT-FAMILY: "Courier New", arial, serif; BACKGROUND-COLOR: #00ffcc
}
highlight {
  BACKGROUND-COLOR: #ffff99
}
.header {
  PADDING-RIGHT: 15px; PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE: 2.5em; PADDING-BOTTOM: 15px; MARGIN: 0px; PADDING-TOP: 1px; LETTER-SPACING: -0.05em
}
.header SPAN {
  FONT-SIZE: 0.5em; FONT-FAMILY: Arial, serif; LETTER-SPACING: 0px
}
.toolheader {
  MARGIN: 5px 10px; COLOR: #000000; BORDER-BOTTOM: #692px solid; FONT-FAMILY: arial, serif
}
.layer {
  CLEAR: both; BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1em; BACKGROUND: #fff; PADDING-BOTTOM: 0.5em; MARGIN: 15px 5%; OVERFLOW: auto; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #ccc 1px solid
}
.input {
  BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; OVERFLOW: auto; BORDER-LEFT: #ff0000 1px solid; BORDER-BOTTOM: #ff0000 1px solid
}
.button {
  BORDER-RIGHT: #cccccc 1px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px ridge; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px ridge; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px ridge; FONT-FAMILY: serif
}
.note {
  FONT-SIZE: 0.8em
}
detailHeader {
  FONT-WEIGHT: bold
}
detailContent {
  CLEAR: left; DISPLAY: block
}
#mainmenu {
  PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; BACKGROUND: #fff; PADDING-BOTTOM: 0.2em; MARGIN: 0px; PADDING-TOP: 0.2em; BORDER-BOTTOM: #707070 2px solid
}
#mainmenu A {
  BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 16px; PADDING-BOTTOM: 3px; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; COLOR: #333; PADDING-TOP: 3px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: none
}
#mainmenu A:hover {
  BORDER-RIGHT: #9d9d9d 1px solid; BORDER-TOP: #9d9d9d 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #9d9d9d 1px solid; COLOR: #171717; BORDER-BOTTOM: #9d9d9d 1px solid
}
#mainmenu LI {
  DISPLAY: inline; LINE-HEIGHT: 200%; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
.testClass {
  CLEAR: left; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red; FONT-FAMILY: Arial, Helvetica, sans-serif
}

</STYLE>
<!-- jaxWidgets_RuntimeEngine.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_RuntimeEngine.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Runtime Engine to register and process widgets
=========================================

============= FEATURES ==================
- Dynamically loads and parses jaxWidgets
- i18n support for strings
============================================

============= FUTURE PLANS ==================

==============================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/
// Define namespace
if (typeof jaxWidgets != "object") { var jaxWidgets = {}}

// Register namespace and object
jaxWidgets.RuntimeEngine = function()
{
  var registeredWidgets = new Array();
  var totalWidgets = -1;
  var loadedWidgets = new Array();
  var currentWidgets = new Array();
  
  this.registerWidget = function(tag, handler)
  {
    var newWidget = new Array(tag, handler);
    registeredWidgets[++totalWidgets= newWidget;
  };
  
  this.loadEngine = function()
  {
    // Load library component
    _Library = new jaxWidgets.Library();        
    for(var i=0; i <= totalWidgets; i++)
    {
      currentWidgets = document.getElementsByTagName("jax:"+registeredWidgets[i][0]);
      for(var j =0; j < currentWidgets.length; j++)
      {
        registeredWidgets[i][1].load(currentWidgets[j]);
      }
      
      _Library.cleanup(currentWidgets);
    }    
  };
  
  /*
  Debug function for testing purposes only 
  You NEED to create a div with id=debug in your page for this to work
  */
  this.writeDebug = function(string)
  {
    document.getElementById("debug").innerHTML += string + "<br>";
  };
  
  /*
  Error Log function. Can be disabled through setErrors(false)
  */
  this.writeError = function(string)
  {
    if(document.getElementById("jaxErrorLogDiv"))
    {
      document.getElementById("jaxErrorLogDiv").innerHTML += string + "<br>";
    }
    else
    {
      var logDiv = document.createElement("div");
      logDiv.setAttribute("id","jaxErrorLogDiv");
      logDiv.style.color = "red";
      logDiv.style.fontSize = "0.9em";
      logDiv.style.fontWeight = "bold";
      var bodyTag = document.getElementsByTagName("body")[0];
      bodyTag.insertBefore(logDiv,bodyTag.firstChild);
      logDiv.innerHTML = "jax Error : ";
      logDiv.innerHTML += string + "<br>";
    }
  };
      
}

// Register event handlers
// Use quirksmode idea for flexible registration by copying existing events
// onKeyUp
/******* Define GLOBAL Constants *********/
var _Engine;              // The jax Runtime Engine
var _Library;             // The jax Runtime library

_Engine = new jaxWidgets.RuntimeEngine();
var oldEventCode = (window.onload? elm.onload : function () {};
window.onload = function () {oldEventCode(); _Engine.loadEngine();};

</SCRIPT>

<!-- jaxWidgets_Library.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_Library.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Library is a repository for common functions used by jaxWidgets
=========================================

============= FEATURES ==================
- Sets Style of elements
============================================

============= CHANGELOG ==================
17 June 2005 [17:46] [Sarat Pediredla]
- Modified code to replace getAttribute().toLowerCase() with tmpString
  because strangely IE 6.0 wont support it.
18 June 2005 [08:45] [Sarat Pediredla]
- Added functions to get X & Y position of elements.
- Modified style setters to use element.style.cssText
==========================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

// The following array IS NEEDED for widgets wishing to lock submitting forms
var submitLockedBy = new Array();

// Register object
jaxWidgets.Library = function()
{
  // Cleanup function to remove jax XML tags
  this.cleanup = function(array)
  {
    var arraylength = array.length;
    for(var i=0; i < arraylength; i++)
    {
      var element = array[0];
      element.parentNode.removeChild(element);
    }
    return true;
  }
  
  // Gets the index of an element in an array
  this.getIndex = function(element,array)
  {
    for(var i=0; i < array.length; i++)
    {
      if(array[i== element)
        return i;
    }
  }
  // Sets the CSS style from source to target element
  this.setStyle = function(sourceElement,targetElement)
  {
    if(sourceElement.getAttribute("style"&& sourceElement.getAttribute("style").length > 0)
    {
      targetElement.style.cssText = sourceElement.getAttribute("style");
      return;
    }
    if(sourceElement.getAttribute("class"&& sourceElement.getAttribute("class").length > 0)    
    {      
      targetElement.setAttribute("className",sourceElement.getAttribute("class"));
      targetElement.setAttribute("class",sourceElement.getAttribute("class"));
      return;
    }
  }
  
  // Returns parent form of a given element
  this.getParentForm = function(element)
  {
    for(var i=0;i < document.forms.length; i++)
    {
      if(document.forms[i][element.id== element)
        return document.forms[i];
    }
    _Engine.writeError("jax Error : Your elements are not embedded inside a form");
    return null;
  }
  
  // Returns the submit button for a given form
  this.getSubmitElement = function(currentForm)
  {
    for(i=0;i<currentForm.length;i++)
    {
      var currentElement = currentForm.elements[i];
      var tmpString = currentElement.type;
      if(tmpString.toString().toLowerCase() == "submit")
        return currentElement;
    }
  }
  
  // Disables submitting of forms when fields not validated
  this.disableSubmit = function(element)
  {    
    form this.getParentForm(element);
    var btnSubmit = this.getSubmitElement(form);    
    if(btnSubmit)
      btnSubmit.disabled = true;
  }
  
  this.enableSubmit = function(element)
  {    
    form this.getParentForm(element);
    var btnSubmit = this.getSubmitElement(form);
    if(btnSubmit)
      btnSubmit.disabled = false;
  }
  
  this.lockSubmit = function(id)
  {
    var index = _Library.getIndex(id,submitLockedBy)
    if(!(index >= 0))
    {
      submitLockedBy.push(id);    
    }  
    _Library.disableSubmit(document.getElementById(id));
  }
  
  this.unlockSubmit = function(id)
  {
    var index = _Library.getIndex(id, submitLockedBy);
    if(index > -1)
    {
      submitLockedBy.pop(index);
      if(_Library.noSubmitLocks())
        _Library.enableSubmit(document.getElementById(id));
    }
  }
    
  this.noSubmitLocks = function()
  {
    if(submitLockedBy.length <= 0)
      return true;
    return false;
  }
  
  this.getXPos = function(element)
  {
      xPos = element.offsetLeft;
      tempEl = element.offsetParent;
        while (tempEl != null
      {
        xPos += (tempEl.offsetLeft);
          tempEl = tempEl.offsetParent;
        }
      return xPos;
  }
  
  this.getYPos = function(element)
  {    
      yPos = element.offsetTop;
      tempEl = element.offsetParent;
        while (tempEl != null
      {
        yPos += tempEl.offsetTop;
          tempEl = tempEl.offsetParent;
        }
      return yPos;    
  }
          
}
  
</SCRIPT>

<!-- jaxWidgets_Validator.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_Validator.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 27/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The validator widget is a part of the jaxWidgets library. It provides
dynamic in-page validation of common fields.
=========================================

============= FEATURES ==================
- Uses jaxXML markup tags to specify designer friendly tags in HTML (.NET style)
- i18n support for strings
- Customisable UI
- Use on any number of fields
- Validates most common formats
============================================

============= CHANGELOG ==================

==========================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

// Register object
jaxWidgets.Validator = function()
{
  // Validation settings
  var isRequired = "false";
  
  // Common regexs
  var regexEmail = /^([w]+)(.[w]+)*@([w]+)(.[w]{2,3}){1,2}$/;
  var regexUrl = /^(http://www.|https://www.|ftp://www.|www.){1}([w]+)(.[w]+){1,2}$/;
  var regexDate = /^d{1,2}(-|/|.)d{1,2}1d{4}$/;
  var regexTime = /^([1-9]|1[0-2]):[0-5]d$/;
  var regexIP = /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/;
  var regexInteger = /(^-?dd*$)/;       
  
  // United states specific regexs
  var regexPostcode_US = /d{5}(-d{4})?/;
  var regexSSN_US = /d{3}-d{2}-d{4}/;   
  var regexPhone_US = /^(?d{3})?s|-d{3}-d{4}$/;
  var regexState_US = /^(AK|AL|AR|AZ|CA|CO|CT|DC|DE|FL|GA|HI|IA|ID|IL|IN|KS|KY|LA|MA|MD|ME|MI|MN|MO|MS|MT|NB|NC|ND|NH|NJ|NM|NV|NY|OH|OK|OR|PA|RI|SC|SD|TN|TX|UT|VA|VT|WA|WI|WV|WY)$/i;
  
  // United Kingdom specific regexs
  var regexPostcode_UK = /^([A-Za-z]{1,2})([0-9]{2,3})([A-Za-z]{2})$/;   
  
  // i18n settings
  var strLocale = "US";  
  var strType = "String";
  var strRequired = "Required";
  var strInvalid = "Invalid format";

  // Internal global vars
  var tmpString;
  
  // Create validator
  this.load = function(element)
  {
    if(!element)
    {
      _Engine.writeError('jax Error: Validator cannot load');
      return;
    }
    
    var fieldElement = document.getElementById(element.getAttribute("ControlToValidate"));
    if(!fieldElement)
    {
      _Engine.writeError('jax Error: Validator is missing a ControlToValidate attribute');
      return;
    }    
    
    // Create validator layer
    var validatorElement = document.createElement("span");
    validatorElement.setAttribute("id",fieldElement.id+"_valid");
    
    element.parentNode.insertBefore(validatorElement,element.nextSibling);
    
    // Standard function to parse the custom jax tag
    this.parseTag(element,validatorElement);    
    
    // Create style for current element using DOM compatible function from Library
    _Library.setStyle(element, validatorElement);
    
    tmpString = validatorElement.getAttribute("isRequired")
    if(tmpString.toString().toLowerCase() == "true")
    {
      _Validator.validate(fieldElement.id);
    }
    
    // Register event handlers
    // Use quirksmode idea for flexible registration by copying existing events
    // onSubmit
    var parentForm = _Library.getParentForm(fieldElement);
    var oldEventCode = (parentForm.onsubmit? parentForm.onsubmit : function () {};
    parentForm.onsubmit = function () {oldEventCode()return _Validator.validate(fieldElement.id)};    
    // onBlue
    var oldEventCode = (fieldElement.onblur? fieldElement.onblur : function () {};
    fieldElement.onblur = function () {oldEventCode()return _Validator.validate(fieldElement.id)};
  };
  
  this.setInvalid = function(div)
  {
    div.innerHTML = div.getAttribute("strInvalid");
  };
  
  this.validate = function(id)
  {    
      var element;
    if(!(element = document.getElementById(id)))
    {
      return false;
    }
    var validDiv = document.getElementById(id+"_valid");
    var validString = element.value;    
    if(validString.length == 0)
    {
      tmpString = validDiv.getAttribute("isRequired");
      var isRequired = tmpString.toString().toLowerCase();
      if(isRequired == "true")
      {
        validDiv.innerHTML = validDiv.getAttribute("strRequired");
        return false;
      }
      else
      {
        validDiv.innerHTML = "";
      }      
    }
    
    // If we have reached here, we can continue with validation
    var tmpLocale = validDiv.getAttribute("strLocale");
    switch(validDiv.getAttribute("strType"))
    {
      case "String" 
        return true;
        break;
      
      case "Email" :  
        if(!validString.match(regexEmail))
          this.setInvalid(validDiv)return false}
        break;
      
      case "Url" :  
        if(!validString.match(regexUrl))
          this.setInvalid(validDiv)return false}
        break;
      
      case "Date" :  
        if(!validString.match(regexDate))
          this.setInvalid(validDiv)return false}
        break;
      
      case "Time" :  
        if(!validString.match(regexTime))
          this.setInvalid(validDiv)return false}
        break;
      
      case "IP" :  
        if(!validString.match(regexIP))
          this.setInvalid(validDiv)return false}
        break;
      
      case "Integer" :  
        if(!validString.match(regexInteger))
          this.setInvalid(validDiv)return false}
        break;
      
      case "Postcode" :
        switch(tmpLocale)
        {
          case "US" :  
            if(!validString.match(regexPostcode_US))
              this.setInvalid(validDiv)return false}
            break;
          case "Email" :  
            if(!validString.match(regexPostcode_UK))
              this.setInvalid(validDiv)return false}
            break;
        }
        break;
      
      // No need to check locale for SSN as it is US specific
      case "SSN" :  
        if(!validString.match(regexSSN_US))
          this.setInvalid(validDiv)return false}
        break;
      
      case "Phone" :  
        switch(tmpLocale)
        {
          case "US" :  
            if(!validString.match(regexPhone_US))
              this.setInvalid(validDiv)return false}
            break;                              
        }
        break;
      
      // Only US States work for now
      case "State" :  
        switch(tmpLocale)
        {
          case "Email" :  
            if(!validString.match(regexState_US))
              this.setInvalid(validDiv)return false}
            break;
        }
        break;                                      
        
      // Do custom validation
      case "Custom" :
        if(!validString.match(validDiv.getAttribute("Match")))
          this.setInvalid(validDiv)return false}
        break;
    }
    
    // If we have reached here, everything is OK    
    validDiv.innerHTML = "";
    return true;
  };    
  
  /********* Custom tag parser **********/
  this.parseTag = function(element,validatorElement)
  {          
      if(element.getAttribute("Required"))
      validatorElement.setAttribute("isRequired",element.getAttribute("Required"));
    else
      validatorElement.setAttribute("isRequired",isRequired);
            
    if(element.getAttribute("TextRequired"))
      validatorElement.setAttribute("strRequired",element.getAttribute("TextRequired"));
    else
      validatorElement.setAttribute("strRequired",strRequired);    
      
    if(element.getAttribute("TextInvalid"))
      validatorElement.setAttribute("strInvalid",element.getAttribute("TextInvalid"));
    else
      validatorElement.setAttribute("strInvalid",strInvalid);
      
    if(element.getAttribute("Type"))
      validatorElement.setAttribute("strType", element.getAttribute("Type"));
    else
      validatorElement.setAttribute("strType", strType);
    
    if(element.getAttribute("Locale"))
      validatorElement.setAttribute("strLocale", element.getAttribute("Locale"));
    else
      validatorElement.setAttribute("strLocale", strLocale);
    
    if(element.getAttribute("Match"))
      validatorElement.setAttribute("strCustom", element.getAttribute("Match"));1
  };      
  
  this.registerWithEngine = function(_Validator)
  {
    var tag = "Validator";
    var handler = _Validator;
    _Engine.registerWidget(tag, handler);
  };
}
  
var _Validator = new jaxWidgets.Validator();
_Validator.registerWithEngine(_Validator);



</SCRIPT>


<BODY>
<H2>Demo</H2>
<DIV class=layer id=jaxDetail>This is a demo for jax Validators <BR><BR>
<FORM id=testForm name=form method=post>IP Address : 
   <INPUT id=ip>
      <JAX:VALIDATOR class=testClass Required="true" Type="IP" ControlToValidate="ip">
      </JAX:VALIDATOR> 
      <BR>Email: 
      <INPUT id=email>
      <JAX:VALIDATOR class=testClass Required="true" Type="Email" ControlToValidate="email" TextRequired="Cant be empty">
      </JAX:VALIDATOR> 
      <BR>URL : 
      <INPUT id=url>
      <JAX:VALIDATOR class=testClass Type="Url" ControlToValidate="url" TextInvalid="Need website">
      </JAX:VALIDATOR> 
      <BR>
   <INPUT id=submitbtn type=submit value=submit> 
</FORM>
</BODY>
</HTML>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Form Control
» Validation