Solved

Regular Expression has me stumped - valid characters

Posted on 2007-04-10
7
208 Views
Last Modified: 2011-10-03
Hi,

I'm trying to add a function - validateAlphaNum -  to a form validation script by Stephen Poley. The new function checks fields for allowed characters:

I'm currently using the following syntax and it is not working (See the code below with my function at the bottom):
var alphaRE = /[a-zA-Z0-9 .,_-]/ ;

I'm not getting the alert if I put an illegal character in the field for fields that use this function, either with the onChange or onSubmit. All of the other (original)  functions are working fine. Can anyone tell me what I did wrong. I've been researching this for hours and tried several things, but I must be overlooking the solution.

Thank you!
Kally

// ----------------------------------------------------------------------
// Javascript form validation routines.
// Author: Stephen Poley
// http://www.xs4all.nl/~sbpoley/webmatters/formval.html
// ----------------------------------------------------------------------

var nbsp = 160;            // non-breaking space char
var node_text = 3;      // DOM text node-type
var emptyString = /^\s*$/ ;
var global_valfield;      // retain valfield for timer thread

// --------------------------------------------
//                  trim
// Trim leading/trailing whitespace off string
// --------------------------------------------

function trim(str)
{
  return str.replace(/^\s+|\s+$/g, '');
}


// --------------------------------------------
//                  setfocus
// Delayed focus setting to get around IE bug
// --------------------------------------------

function setFocusDelayed()
{
  global_valfield.focus();
}

function setfocus(valfield)
{
  // save valfield in global variable so value retained when routine exits
  global_valfield = valfield;
  setTimeout( 'setFocusDelayed()', 100 );
}


// --------------------------------------------
//                  msg
// Display warn/error message in HTML element.
// commonCheck routine must have previously been called
// --------------------------------------------

function msg(fld,     // id of element to display message in
             msgtype, // class to give element ("warn" or "error")
             message) // string to display
{
  // setting an empty string can give problems if later set to a
  // non-empty string, so ensure a space present. (For Mozilla and Opera one could
  // simply use a space, but IE demands something more, like a non-breaking space.)
  var dispmessage;
  if (emptyString.test(message))
    dispmessage = String.fromCharCode(nbsp);    
  else  
    dispmessage = message;

  var elem = document.getElementById(fld);
  elem.firstChild.nodeValue = dispmessage;  
 
  elem.className = msgtype;   // set the CSS class to adjust appearance of message
}

// --------------------------------------------
//            commonCheck
// Common code for all validation routines to:
// (a) check for older / less-equipped browsers
// (b) check if empty fields are required
// Returns true (validation passed),
//         false (validation failed) or
//         proceed (don't know yet)
// --------------------------------------------

var proceed = 2;  

function commonCheck    (valfield,   // element to be validated
                         infofield,  // id of element to receive info/error msg
                         required)   // true if required
{
  if (!document.getElementById)
    return true;  // not available on this browser - leave validation to the server
  var elem = document.getElementById(infofield);
  if (!elem.firstChild) return true;  // not available on this browser
  if (elem.firstChild.nodeType != node_text) return true;  // infofield is wrong type of node  

  if (emptyString.test(valfield.value)) {
    if (required) {
      msg (infofield, "error", "ERROR: required");  
      setfocus(valfield);
      return false;
    }
    else {
      msg (infofield, "warn", "");   // OK
      return true;  
    }
  }
  return proceed;
}

// --------------------------------------------
//            validatePresent
// Validate if something has been entered
// Returns true if so
// --------------------------------------------

function validatePresent(valfield,   // element to be validated
                         infofield ) // id of element to receive info/error msg
{
  var stat = commonCheck (valfield, infofield, true);
  if (stat != proceed) return stat;

  msg (infofield, "warn", "");  
  return true;
}

// --------------------------------------------
//               validateEmail
// Validate if e-mail address
// Returns true if so (and also if could not be executed because of old browser)
// --------------------------------------------

function validateEmail  (valfield,   // element to be validated
                         infofield,  // id of element to receive info/error msg
                         required)   // true if required
{
  var stat = commonCheck (valfield, infofield, required);
  if (stat != proceed) return stat;

  var tfld = trim(valfield.value);  // value of field with whitespace trimmed off
  var email = /^[^@]+@[^@.]+\.[^@]*\w\w$/  ;
  if (!email.test(tfld)) {
    msg (infofield, "error", "ERROR: not a valid e-mail address");
    setfocus(valfield);
    return false;
  }

  var email2 = /^[A-Za-z][\w.-]+@\w[\w.-]+\.[\w.-]*[A-Za-z][A-Za-z]$/  ;
  if (!email2.test(tfld))
    msg (infofield, "warn", "Unusual e-mail address - check if correct");
  else
    msg (infofield, "warn", "");
  return true;
}


// --------------------------------------------
//            validateTelnr
// Validate telephone number
// Returns true if so (and also if could not be executed because of old browser)
// Permits spaces, hyphens, brackets and leading +
// --------------------------------------------

function validateTelnr  (valfield,   // element to be validated
                         infofield,  // id of element to receive info/error msg
                         required)   // true if required
{
  var stat = commonCheck (valfield, infofield, required);
  if (stat != proceed) return stat;

  var tfld = trim(valfield.value);  // value of field with whitespace trimmed off
  var telnr = /^\+?[0-9 ()-]+[0-9]$/  ;
  if (!telnr.test(tfld)) {
    msg (infofield, "error", "ERROR: not a valid telephone number. Characters permitted are digits, space ()- and leading +");
    setfocus(valfield);
    return false;
  }

  var numdigits = 0;
  for (var j=0; j<tfld.length; j++)
    if (tfld.charAt(j)>='0' && tfld.charAt(j)<='9') numdigits++;

  if (numdigits<6) {
    msg (infofield, "error", "ERROR: " + numdigits + " digits - too short");
    setfocus(valfield);
    return false;
  }

  if (numdigits>14)
    msg (infofield, "warn", numdigits + " digits - check if correct");
  else {
    if (numdigits<10)
      msg (infofield, "warn", "Only " + numdigits + " digits - check if correct");
    else
      msg (infofield, "warn", "");
  }
  return true;
}

// --------------------------------------------
//             validateAge
// Validate person's age
// Returns true if OK
// --------------------------------------------

function validateAge    (valfield,   // element to be validated
                         infofield,  // id of element to receive info/error msg
                         required)   // true if required
{
  var stat = commonCheck (valfield, infofield, required);
  if (stat != proceed) return stat;

  var tfld = trim(valfield.value);
  var ageRE = /^[0-9]{1,3}$/
  if (!ageRE.test(tfld)) {
    msg (infofield, "error", "ERROR: not a valid age");
    setfocus(valfield);
    return false;
  }

  if (tfld>=200) {
    msg (infofield, "error", "ERROR: not a valid age");
    setfocus(valfield);
    return false;
  }

  if (tfld>110) msg (infofield, "warn", "Older than 110: check correct");
  else {
    if (tfld<7) msg (infofield, "warn", "Bit young for this, aren't you?");
    else        msg (infofield, "warn", "");
  }
  return true;
}
// -----------------------------------------
//             validateDropdown
// Returns true if OK
// vfld.options[vfld.selectedIndex].value
// -----------------------------------------
function validateDropdown(vfld,   // element to be validated
                         ifld) {      
    //if (vfld.selectedIndex.value == 0 || vfld.selectedIndex.value == "") {
      if (vfld == 0 || vfld == "") {
              msg (ifld, "error", "Please select a Storage Unit Size.");
            return false;
  }
  msg (ifld, "warn", "");
  return true;
}

function validateRadio2(vfld,   // for two radio buttons
                         ifld) {
      if (!vfld[0].checked &&
!vfld[1].checked ) {
      // no radio button is selected
      msg (ifld, "error", "Please Select an Option.");
      return false;
      }
       return true;
}
// -----------------------------------------
//             validateAlphaNum
// Returns true if OK
// -----------------------------------------

function validateAlphaNum (valfield,   // element to be validated
                         infofield,  // id of element to receive info/error msg
                         required)   // true if required
{
  var stat = commonCheck (valfield, infofield, required);
  if (stat != proceed) return stat;

  var tfld = trim(valfield.value);  
  var alphaRE = /[a-zA-Z0-9 ,_-]/ ;
  if (!alphaRE.test(tfld)) {
    msg (infofield, "error", "ERROR: Only alphanumeric characters plus .,- _ are allowed");
    setfocus(valfield);
    return false;
  }

  return true;
}
0
Comment
Question by:KallyM
  • 4
  • 2
7 Comments
 
LVL 84

Accepted Solution

by:
ozo earned 500 total points
ID: 18887436
var alphaRE = /^[a-zA-Z0-9 .,_-]+$/ ;
0
 

Author Comment

by:KallyM
ID: 18887728
Thanks for the attempt ozo, but I have already tried that. I keep looking at it all, but can't see anything wrong.

I've included some code from the form page to see if that helps.........

The form page has the following in the HEAD:

<script language="JavaScript" type="text/javascript">
function validateOnSubmit() {
      var elem;
    var errs=0;      
    // execute all element validations in reverse order, so focus gets
    // set to the first one in error.
      //if (!validateCheckbox(document.forms.form1.method, 'inf_method', 1)) errs += 1;
      if (!validateTelnr(document.forms.form1.phone, 'inf_phone',false)) errs += 1;
      if (!validateAlphaNum(document.forms.form1.address2, 'inf_address2', false)) errs += 1;
      if (!validateAlphaNum(document.forms.form1.address1, 'inf_address1', false)) errs += 1;
      if (!validateAlphaNum(document.forms.form1.website, 'inf_website', false)) errs += 1;
      if (!validateEmail  (document.forms.form1.email, 'inf_email', true)) errs += 1;
       if (!validatePresent(document.forms.form1.name, 'inf_name')) errs += 1;
      if (!validateRadio2(document.forms.form1.member, 'inf_member')) errs += 1;

    if (errs>1)  alert('There are fields which need correction before sending');
    if (errs==1) alert('There is a field which needs correction before sending');

    return (errs==0);
  };
</script>


And the following in the BODY:

 <tr>
                <td colspan="2">&nbsp;&nbsp;&nbsp;3. Address Line 1: (optional) </td>
              <td colspan="2"><input name="address1" type="text" id="address1" maxlength="75" onChange="validateAlphaNum(this, 'inf_address1', false);"><span id="inf_address1">&nbsp;</span></td>
            </tr>
0
 

Author Comment

by:KallyM
ID: 18887741
Wait! ozo - that IS half of the problem. I just found the other half.....

I needed to add this near the end of the function:
msg (infofield, "warn", "");  

Here is the final function:

function validateAlphaNum (valfield,   // element to be validated
                         infofield,  // id of element to receive info/error msg
                         required)   // true if required
{
  var stat = commonCheck (valfield, infofield, required);
  if (stat != proceed) return stat;

  var tfld = trim(valfield.value);  
  var alphaRE = /^[a-zA-Z0-9 .,_-]+$/ ;
  if (!alphaRE.test(tfld)) {
    msg (infofield, "error", "ERROR: Only alphanumeric characters plus .,- _ are allowed");
    setfocus(valfield);
    return false;
  }

 msg (infofield, "warn", "");  
  return true;
}
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Expert Comment

by:muoreh
ID: 18887782
I don't think:
var alphaRE = /^[a-zA-Z0-9 .,_-]+$/ ;
can validate if the invalid characters are mixed with valid ones.

this should work:
var alphaRE = /[^a-zA-Z0-9 ,_-]/ ;
if (alphaRE.test(tfld)) {...
0
 

Author Comment

by:KallyM
ID: 18891446
Thank you for responding.

I don't understand what you mean by "invalid characters are mixed with the valid ones"?

ozo changed the syntax by adding a ^ before the brackets and a +$ after the brackets. Evidently this will check all the characters from the beginning to the end. The way I had it without those characters it was not working properly. Any characters within the brackets are valid. In my case I wanted users to be able to use some commom punctuation characters in addition to letters and numbers.

Kally
0
 
LVL 2

Expert Comment

by:muoreh
ID: 18895888
Sorry, discard that, I got confused and thought those inside the brackets were the invalid characters =p
0
 

Author Comment

by:KallyM
ID: 18900065
All is solved. Just a final note: This is a nice script for client-side validation.  But, I also have a PHP script that checks and validates everything that was submitted.

Kally
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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…

747 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

9 Experts available now in Live!

Get 1:1 Help Now