Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

Telephone and Email form validation, javascript

I have a form that has two fields that I need to validate so the user can't submit if they don't enter the correct information for a telephone and email address.  This is my script that the values get passed to.  I'm not quite sure how to get the telephone and email address validation incorporated in this.
function doCreateUser(edit) {
   var chk = 0;
   chkArray = new Array();
   var chkFNm = document.frmEdit.edtFNm.value;
   var chkLNm = document.frmEdit.edtLNm.value;
   var chkNmExt = document.frmEdit.edtNmExt.value;
   var chkComPhn = document.frmEdit.edtComPhn.value;
   var chkComEml = document.frmEdit.edtComEml.value;
   var chkTZone = document.frmEdit.edtTZone.value;   
   var chkFacID = document.frmEdit.edtFacID.value;
   var chkRole = document.frmEdit.edtRole.value;
   if (chkFNm == "") {
      chk++;
      chkArray[chk] = "A valid 'user first name' is required";}
   if (chkLNm == "") {
      chk++;
      chkArray[chk] = "A valid 'user last name' is required";}
   if (chkComEml == "") {
      chk++;
      chkArray[chk] = "A valid 'email address' is required";}
   if (chkTZone == "") {
      chk++;
      chkArray[chk] = "A valid 'user time zone' selection is required";}	  
   if (chkFacID == "") {
      chk++;
      chkArray[chk] = "A valid 'facility' selection is required";}
   if (chkRole == "") {
      chk++;
      chkArray[chk] = "A valid 'role' selection is required";}
   if (chk > 0) {
      var chk_txt = "Errror! The form cannot be submitted due to the following:\n\n";
      for (c = 1; c <= chk; c++) {
         chk_txt = chk_txt + c + ") " + chkArray[c] + "\n";}
      alert(chk_txt);}
   else {
      document.frmAddUser.fldNewEdit.value = edit;
      document.frmAddUser.fldNewFNm.value = chkFNm;
      document.frmAddUser.fldNewLNm.value = chkLNm;
      document.frmAddUser.fldNewNmExt.value = chkNmExt;
      document.frmAddUser.fldNewComPhn.value = chkComPhn;
      document.frmAddUser.fldNewComEml.value = chkComEml;
      document.frmAddUser.fldNewTZone.value = chkTZone;	  
      document.frmAddUser.fldNewFacID.value = chkFacID;
      document.frmAddUser.fldNewRole.value = chkRole;	
      document.frmAddUser.cmdSubmit.click();}}

Open in new window

0
Lee R Liddick Jr
Asked:
Lee R Liddick Jr
  • 6
  • 2
3 Solutions
 
manchCommented:
Include these javascript functions to your code.
Remember : Replace the ToDo parts correctly in your code.
Also, for valid phone number format you may have to search for a correct Phone Number regular expression (here i have included expression for a 3-4 number format).

Suppose your web page collects a customer's seven-digit phone number and you want to verify that the phone number is in the correct format, "xxx-xxxx", where each "x" is a digit. The following expression will search through text looking for such a string:

/* Regular Expression to validate the Phone Number format. */
        var validPhoneNumber = \b\d{3}-\d{4};

Open in new window


<script language="javascript" type="text/javascript">

    /*Javascript function validating a Text Box input for a valid E-Mail address. */
    function IsValidEMail() 
    {
        /* ToDo : Please replace the name of your EMail Control with txtEMail here.*/
        var email = document.getElementById("<%=txtEMail.ClientID %>").value;
        
        /* Regular Expression to validate the EMail address format. */
        var validEMail = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

        var gotItCorrect = email.match(validEMail);

        /* If the EMail is not correct */
        if (!gotItCorrect) {

            alert("Please enter a valid E-Mail (of format xxx@yyy.zzz).");

            /* ToDo : Please replace the name of your EMail Control with txtEMail here.*/
            document.getElementById("<%=txtEMail.ClientID %>").focus();
            return false;
        }
        else {
            return true;
        }
    }

    /*Javascript function validating a Text Box input for a valid Phone Number. */
    function IsValidPhoneNumber () {
        /* ToDo : Please replace the name of your PhoneNumber Control with txtPhoneNumber here.*/
        var phoneNumber = document.getElementById("<%=txtPhoneNumber.ClientID %>").value;

        /* ToDo : Regular Expression to validate the Phone Number format. */
        var validPhoneNumber = \b\d{3}-\d{4};

        var gotItCorrect = phoneNumber.match(validPhoneNumber);

        /* If the EMail is not correct */
        if (!gotItCorrect) {

            alert("Please enter a valid Phone Number.");

            /* ToDo : Please replace the name of your EMail Control with txtEMail here.*/
            document.getElementById("<%=txtPhoneNumber.ClientID %>").focus();
            return false;
        }
        else {
            return true;
        }
    }

</script>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Please use the CODE button or [ code ] tags.

code button
I have edited your posts to wrap the code in [ code] [/ code]
0
 
Michel PlungjanIT ExpertCommented:
manch: I suggest you do not alert in your function and instead change

var gotItCorrect = email.match(validEMail);

        /* If the EMail is not correct */
        if (!gotItCorrect) {

            alert("Please enter a valid E-Mail (of format xxx@yyy.zzz).");

            /* ToDo : Please replace the name of your EMail Control with txtEMail here.*/
            document.getElementById("<%=txtEMail.ClientID %>").focus();
            return false;
        }
        else {
            return true;
        }

Open in new window

to
  return email.match(validEMail);

Open in new window

and have the calling function take care of display

Also your phone number RegEx is not valid
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
Here is my suggestion

regexes are from http://regexlib.com/DisplayPatterns.aspx?categoryId=7

function isValidEmail(str)  {
  // Email
   return  /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/.match(str);
}

function isValidPhone(str)  {
 // US telephone number 
   return /^[\\(]{0,1}([0-9]){3}[\\)]{0,1}[ ]?([^0-1]){1}([0-9]){2}[ ]?[-]?[ ]?([0-9]){4}[ ]*((x){0,1}([0-9]){1,5}){0,1}$/.match(str); 
}

function doCreateUser(edit) {
   chkArray = [];
   var chkFNm     = document.frmEdit.edtFNm.value;
   var chkLNm     = document.frmEdit.edtLNm.value;
   var chkNmExt   = document.frmEdit.edtNmExt.value;
   var chkComPhn  = document.frmEdit.edtComPhn.value;
   var chkComEml  = document.frmEdit.edtComEml.value;
   var chkTZone   = document.frmEdit.edtTZone.value;   
   var chkFacID   = document.frmEdit.edtFacID.value;
   var chkRole    = document.frmEdit.edtRole.value;
   if (chkFNm == "") {
      chkArray.push("A valid 'user first name' is required");
   }
   if (chkLNm == "") {
      chkArray.push("A valid 'user last name' is required");
   }
   if (chkComPhn == "" || !isValidPhone(chkComPhn)) {
      chkArray.push("A valid 'email address' is required");
   }
   if (chkComEml == "" || !isValidEmail(chkComEml)) {
      chkArray.push("A valid 'email address' is required");
   }
   if (chkTZone == "") {
      chkArray.push("A valid 'user time zone' selection is required");
   }	  
   if (chkFacID == "") {
      chkArray.push("A valid 'facility' selection is required");
   }
   if (chkRole == "") {
      chkArray.push("A valid 'role' selection is required");
   }
   if (chkArray.length> 0) {
      var chk_txt = "Errror! The form cannot be submitted due to the following:\n";
      for (var i=0, n=chkArray.length;i<n;i++) {
         chk_txt += "\n"+(i+1) + ") " + chkArray[i];
      }
      alert(chk_txt);
      return false;
   }
  document.frmAddUser.fldNewEdit.value    = edit;
  document.frmAddUser.fldNewFNm.value     = chkFNm;
  document.frmAddUser.fldNewLNm.value     = chkLNm;
  document.frmAddUser.fldNewNmExt.value   = chkNmExt;
  document.frmAddUser.fldNewComPhn.value  = chkComPhn;
  document.frmAddUser.fldNewComEml.value  = chkComEml;
  document.frmAddUser.fldNewTZone.value   = chkTZone;	  
  document.frmAddUser.fldNewFacID.value   = chkFacID;
  document.frmAddUser.fldNewRole.value    = chkRole;	
  document.frmAddUser.cmdSubmit.click();
  return true;
}

Open in new window

0
 
Lee R Liddick JrReporting AnalystAuthor Commented:
Thank you mplungjan, very detailed and helpful to follow.  I am getting a script error though stating that TypeError: (intermediate value).match is not a function.
0
 
Michel PlungjanIT ExpertCommented:
I'll test in jsfiddle tomorrow
0
 
Michel PlungjanIT ExpertCommented:
Sorry, I swapped the string and the regex

DEMO

function isValidEmail(str)  {
  // Email
   return  str.match(/^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/);
}

function isValidPhone(str)  {
 // US telephone number 
   return str.match(/^[\\(]{0,1}([0-9]){3}[\\)]{0,1}[ ]?([^0-1]){1}([0-9]){2}[ ]?[-]?[ ]?([0-9]){4}[ ]*((x){0,1}([0-9]){1,5}){0,1}$/);
}

Open in new window

0
 
Lee R Liddick JrReporting AnalystAuthor Commented:
Okay, that works.  But I am trying to get the Phone number to not be required but still be validated.  Everything I am trying is not working.  This was my last attempt...

   if (chkFNm == "") {
      chk++;
      chkArray[chk] = "A valid 'user first name' is required";}
   if (chkLNm == "") {
      chk++;
      chkArray[chk] = "A valid 'user last name' is required";}
   if (chkComPhn == !isValidPhone(chkComPhn)) {
      chk++;
      chkArray[chk] = "A valid 'telephone' is required";}
   if (chkComEml == "" || !isValidEmail(chkComEml)) {
      chk++;
      chkArray[chk] = "A valid 'email address' is required";}
   if (chkTZone == "") {
      chk++;
      chkArray[chk] = "A valid 'user time zone' selection is required";}	  
   if (chkFacID == "") {
      chk++;
      chkArray[chk] = "A valid 'facility' selection is required";}
   if (chkRole == "") {
      chk++;
      chkArray[chk] = "A valid 'role' selection is required";}
   if (chk > 0) {
      var chk_txt = "Errror! The form cannot be submitted due to the following:\n\n";
      for (c = 1; c <= chk; c++) {
         chk_txt = chk_txt + c + ") " + chkArray[c] + "\n";}
      alert(chk_txt);}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
if (chkComPhn != "" && !isValidPhone(chkComPhn)) {
      chkArray.push("A valid 'email address' is required");
 }
if (chkComEml != "" && !isValidEmail(chkComEml)) {
     chkArray.push("A valid 'email address' is required");
}
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now