[SOLVED] architecturalinstallationteam.com onsubmit validation problem

[Revlet]

Well it's no so much as being an odd number, but I know some countries that have phone numbers of that format. I had a job once where I had to input business card info into Excel and there were a lot of odd numbers from countries like Germany or something like that. I can't remember.

 

I rather not look through all that if I don't have to. Just because it's so long. It would be easier for me to just rewrite it. Also, you should know that copying and pasting work from other people and asking for help here makes the help that much harder. It'll be better if you wrote something completely wrong.

function validateForm (frm) {
   if (/[^a-z]/i.test(frm.Name.value)) window.alert("Name must contain only letters");
   else if (/[^a-z\d]/i.test(frm.Title.value)) window.alert("Title must contain only letters and numbers");
   else if (/[^a-z\d]/i.test(frm.Company.value)) window.alert("Company must contain only letters and numbers");
   else if (!/^1?\-?(\d{3}\-?){2}\d{4}$/.test(frm.Telephone.value)) window.alert("Telephone must contain digits and -");
   else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) window.alert("Email is not in the correct format");
   else return true;
   return false;
}

 

Yea I get what your saying - no problem.

 

Sorry to nitpick but the code still isn't validating name, title, company.

 

Putting in 1231231234 for phone and 1@1.com lets you through. Also it does them sequencially so after it checks that telephone is correct THEN it says email isn't. rather than in one alert saying that telephone and email are incorrect. I think it's better that way cause then there aren't popups every two seconds

[Ken2k7]

Oh! DOH! /me facepalms...

 

I copied the outdated code from page 1.

 

function validateForm (frm) {
   if (frm.Name.value.length > 0 && /[^a-z]/i.test(frm.Name.value)) window.alert("Name must contain only letters");
   else if (frm.Title.value.length > 0 && /[^a-z\d]/i.test(frm.Title.value)) window.alert("Title must contain only letters and numbers");
   else if (frm.Company.value.length > 0 && /[^a-z\d]/i.test(frm.Company.value)) window.alert("Company must contain only letters and numbers");
   else if (!/^1?\-?(\d{3}\-?){2}\d{4}$/.test(frm.Telephone.value)) window.alert("Telephone must contain digits and -");
   else if (frm.Email.value.length > 0 && !/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) window.alert("Email is not in the correct format");
   else return true;
   return false;
}

 

Also, what's wrong with 1231231234 and 1@1.com? I'll work on the alert display after I get the validation correct.

[Revlet]

Oh! DOH! /me facepalms...

 

I copied the outdated code from page 1.

 

function validateForm (frm) {
   if (frm.Name.value.length > 0 && /[^a-z]/i.test(frm.Name.value)) window.alert("Name must contain only letters");
   else if (frm.Title.value.length > 0 && /[^a-z\d]/i.test(frm.Title.value)) window.alert("Title must contain only letters and numbers");
   else if (frm.Company.value.length > 0 && /[^a-z\d]/i.test(frm.Company.value)) window.alert("Company must contain only letters and numbers");
   else if (!/^1?\-?(\d{3}\-?){2}\d{4}$/.test(frm.Telephone.value)) window.alert("Telephone must contain digits and -");
   else if (frm.Email.value.length > 0 && !/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) window.alert("Email is not in the correct format");
   else return true;
   return false;
}

 

Also, what's wrong with 1231231234 and 1@1.com? I'll work on the alert display after I get the validation correct.

 

 

only telephone validates now

[Revlet]

I actually decided to modify the code to be more streamlined for the phone number validation since I don't want it to actually be REQUIRED.

 

<script type="text/javascript">
// Start Number Validation
function checkCapsLock( e ) {
var myKeyCode=0;
var myShiftKey=false;

// Internet Explorer 4+
if ( document.all ) {
	myKeyCode=e.keyCode;
	myShiftKey=e.shiftKey;

// Netscape 4
} else if ( document.layers ) {
	myKeyCode=e.which;
	myShiftKey=( myKeyCode == 16 ) ? true : false;

// Netscape 6
} else if ( document.getElementById ) {
	myKeyCode=e.which;
	myShiftKey=( myKeyCode == 16 ) ? true : false;

}

// Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
	alert( errormsg[100] );

// Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
} else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {
	alert( errormsg[100] );

}
}

function CalcKeyCode(aChar) {
  var character = aChar.substring(0,1);
  var code = aChar.charCodeAt(0);
  return code;
}

function checkNumber(val) {
  var strPass = val.value;
  var strLength = strPass.length;
  var lchar = val.value.charAt((strLength) - 1);
  var cCode = CalcKeyCode(lchar);


  /* Check if the keyed in character is a number
     do you want alphabetic UPPERCASE only ?
     or lower case only just check their respective
     codes and replace the 48 and 57 */

  if (cCode < 48 || cCode > 57 ) {
    var myNumber = val.value.substring(0, (strLength) - 1);
    val.value = myNumber;
  }
  return false;
}
// Form Validation
function validateForm (frm) {
   if (frm.Name.value.length > 0 && /[^a-z]/i.test(frm.Name.value)) window.alert("Name must contain only letters");
   else if (frm.Title.value.length > 0 && /[^a-z\d]/i.test(frm.Title.value)) window.alert("Title must contain only letters and numbers");
   else if (frm.Company.value.length > 0 && /[^a-z\d]/i.test(frm.Company.value)) window.alert("Company must contain only letters and numbers");
   else if (!/^1?\-?(\d{3}\-?){2}\d{4}$/.test(frm.Telephone.value)) window.alert("Telephone must contain digits and -");
   else if (frm.Email.value.length > 0 && !/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) window.alert("Email is not in the correct format");
   else return true;
   return false;
}
</script>

 

Now, as you can see at http://www.architecturalinstallationteam.com/contact_us it will only let you type numbers in the telephone field.

 

 

So now ALL THAT THE SCRIPT SHOULD DO IS...post in one alert window that Name, Title, Company, and Email are required and check that email is indeed a email address.

 

Hopefully that is a simple edit and I'll be done

[Ken2k7]

Sorry to have to make you do all that, but I finally got off my lazy butt and tested this one. I pretty much guarantee it will work. So you can replace all you have with this:

 

function validateForm (frm) {
   if (!/^[a-z]+$/i.test(frm.Name.value)) window.alert("Name must contain only letters");
   else if (!/^[a-z\d]+$/i.test(frm.Title.value)) window.alert("Title must contain only letters and numbers");
   else if (!/^[a-z\d]+$/i.test(frm.Company.value)) window.alert("Company must contain only letters and numbers");
   else if (frm.Telephone.value.length > 0 && !/^1?\-?(\d{3}\-?){2}\d{4}$/.test(frm.Telephone.value)) window.alert("Telephone must contain digits and -");
   else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) window.alert("Email is not in the correct format");
   else return true;
   return false;
}

 

That should work, except the alerts. Please verify and I'll fix up all the alerts. By the way, how do you want the alerts to be bundled up? Can I get an example? Thanks and I'm so sorry about all this.

[Revlet]

Sorry to have to make you do all that, but I finally got off my lazy butt and tested this one. I pretty much guarantee it will work. So you can replace all you have with this:

 

function validateForm (frm) {
   if (!/^[a-z]+$/i.test(frm.Name.value)) window.alert("Name must contain only letters");
   else if (!/^[a-z\d]+$/i.test(frm.Title.value)) window.alert("Title must contain only letters and numbers");
   else if (!/^[a-z\d]+$/i.test(frm.Company.value)) window.alert("Company must contain only letters and numbers");
   else if (frm.Telephone.value.length > 0 && !/^1?\-?(\d{3}\-?){2}\d{4}$/.test(frm.Telephone.value)) window.alert("Telephone must contain digits and -");
   else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) window.alert("Email is not in the correct format");
   else return true;
   return false;
}

 

That should work, except the alerts. Please verify and I'll fix up all the alerts. By the way, how do you want the alerts to be bundled up? Can I get an example? Thanks and I'm so sorry about all this.

 

 

YAY THANK YOU IT WORKS NOW! haha 

 

And you dont have to apologize for anything I am very appreciative of ANY help!

 

 

So basically for the alerts IDEALLY I would like to have the javascript print which errors all into a div that I would color red...

For example:

 

The following error(s) occured:

• Name is required and can only contain letters.
  
• Title is required and can only contain letters and numbers.
  

 

Then if possible have the input field that contains error highlight red as well. but thats not a big deal if it's too much work!

 

 

 

Otherwise a popup saying:

 

Which errors occured but not sequencially as it is now. So a window with all errors that have occured instead of first saying name, then saying title, then company, etc.

[Revlet]

Oh yea, and the telephone doesn't even need to be included in script anymore since I have the script that won't let anyone type letters now and I don't care about how many numbers there are since email is given

[Ken2k7]

Does this DIV have an ID I can go by? Ideally, you want to do styling in CSS (such as color).

 

Also, does your other telephone script validate the length? Would a number like 992847112345538612934710251232947561 or 123 be valid in your other script?

[Revlet]

Does this DIV have an ID I can go by? Ideally, you want to do styling in CSS (such as color).

 

Also, does your other telephone script validate the length? Would a number like 992847112345538612934710251232947561 or 123 be valid in your other script?

 

 

Yea I can make this div whichever id I want, form_errors would be best. and I know to color div is css  I was just giving you an idea of what I was talking about...

 

just tell me any requirements in css the javascript would have...ie: display:none

 

 

As for the telephone script i'd say if anything a script that validates 7 characters minimum and 17 max (cause some people may have extentions) but it would be validate ONLY if user has inputed some numbers into field. NOT REQUIRED...

 

 

Thanks again for the help!

[Ken2k7]

Well not whichever. It has to be a *unique* ID. There are no requirements. I'll have it populate the DIV. You just have to have it there.

[Revlet]

Well not whichever. It has to be a *unique* ID. There are no requirements. I'll have it populate the DIV. You just have to have it there.

 

 

Yea ill make the div with id form_errors...

[Ken2k7]

I don't know what to say for the email error, so you'll have to fill edit that one.

 

function validateForm (frm) {
var errors = [], errno = 0;
if (!/^[a-z]+$/i.test(frm.Name.value)) errors[errno++] = "Name is required and can only contain letters.";
else if (!/^[a-z\d]+$/i.test(frm.Title.value)) errors[errno++] = "Title is required and can only contain letters and numbers.";
else if (!/^[a-z\d]+$/i.test(frm.Company.value)) errors[errno++] = "Company is required and can only contain letters and numbers.";
else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) errors[errno++] = "Email is required.";
if (errno == 0) return true;
document.getElementById("form_errors").innerHTML = "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
return false;
}

 

That work for you?

[Revlet]

I don't know what to say for the email error, so you'll have to fill edit that one.

 

function validateForm (frm) {
var errors = [], errno = 0;
if (!/^[a-z]+$/i.test(frm.Name.value)) errors[errno++] = "Name is required and can only contain letters.";
else if (!/^[a-z\d]+$/i.test(frm.Title.value)) errors[errno++] = "Title is required and can only contain letters and numbers.";
else if (!/^[a-z\d]+$/i.test(frm.Company.value)) errors[errno++] = "Company is required and can only contain letters and numbers.";
else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) errors[errno++] = "Email is required.";
if (errno == 0) return true;
document.getElementById("form_errors").innerHTML = "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
return false;
}

 

That work for you?

 

Yea it works except is there a way that in javascript I could set the div to display only when an error is given? if you look at site now you will see what I mean.

 

For instance set a variable equal to "none" when no errors are given and "block" when they are and then just include them in a style tag in the page with the variable...(if thats possible?)

 

note that the div is in a seperate php file so if javascript can pass variables to the php script i can use them also

[Ken2k7]

Oh... using CSS, set it to display none.

 

Then use this -

var frm_err = document.getElementbyId("form_errors");
function validateForm (frm) {
   var errors = [], errno = 0;
   if (!/^[a-z]+$/i.test(frm.Name.value)) errors[errno++] = "Name is required and can only contain letters.";
   else if (!/^[a-z\d]+$/i.test(frm.Title.value)) errors[errno++] = "Title is required and can only contain letters and numbers.";
   else if (!/^[a-z\d]+$/i.test(frm.Company.value)) errors[errno++] = "Company is required and can only contain letters and numbers.";
   else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) errors[errno++] = "Email is required.";
   if (errno == 0) return true;
   frm_err.style.display = "block";
   frm_err.innerHTML = "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
   return false;
}

 

The only way JavaScript can pass variables or data to another PHP page (on the same domain) is via AJAX. Why would you have that DIV in another PHP file?

[Revlet]

Oh... using CSS, set it to display none.

 

Then use this -

var frm_err = document.getElementbyId("form_errors");
function validateForm (frm) {
   var errors = [], errno = 0;
   if (!/^[a-z]+$/i.test(frm.Name.value)) errors[errno++] = "Name is required and can only contain letters.";
   else if (!/^[a-z\d]+$/i.test(frm.Title.value)) errors[errno++] = "Title is required and can only contain letters and numbers.";
   else if (!/^[a-z\d]+$/i.test(frm.Company.value)) errors[errno++] = "Company is required and can only contain letters and numbers.";
   else if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) errors[errno++] = "Email is required.";
   if (errno == 0) return true;
   frm_err.style.display = "block";
   frm_err.innerHTML = "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
   return false;
}

 

The only way JavaScript can pass variables or data to another PHP page (on the same domain) is via AJAX. Why would you have that DIV in another PHP file?

 

well that code doesn't do anything - no errors and no validation...  ???

[Ken2k7]

Oh, I misspelled document.getElementById. You can fix that.

 

And FYI, there was an error. Unlike PHP, you just don't see it on the page. It's like a HTML error.

[Revlet]

Oh, I misspelled document.getElementById. You can fix that.

 

And FYI, there was an error. Unlike PHP, you just don't see it on the page. It's like a HTML error.

 

 

It didn't make a difference capitalizing the B. Still doesn't work

 

And firefox is throwing errors at    frm_err.style.display = "block"; saying that frm_err is null in the error console

[Ken2k7]

As a good rule of thumb, scripts should almost always be at the bottom of the page.

[Revlet]

As a good rule of thumb, scripts should almost always be at the bottom of the page.

 

 

I always knew it was a good idea but I didn't realize it made a direct impact!

 

well the script works now, but now we just have to get the errors into one list....if thats not too much trouble 

[Revlet]

Okay so I just noticed something odd about the way the script is handling things....

 

For some reason the script is conflicting with the form and from the input page to preview page it switches the Email into the Telephone field...

 

I removed the telephone onkeypress code and it still had the problem and then when i removed your code it worked again.

 

 

I am highly confused as to why this is...but perhaps there is an easy fix?

[Ken2k7]

1. When I told you to put script tags at the bottom of the page, I didn't mean style tags as well.

2. My script doesn't do that. It's a PHP problem on your end. I assume you used PHP to generate the contents on the Preview page. Well, it's a PHP and HTML problem.

3. Is this solved yet?

[Revlet]

1. When I told you to put script tags at the bottom of the page, I didn't mean style tags as well.

2. My script doesn't do that. It's a PHP problem on your end. I assume you used PHP to generate the contents on the Preview page. Well, it's a PHP and HTML problem.

3. Is this solved yet?

 

1.) there are no style tags at the bottom of page...

2.) i figured out the problem but I have been out of town for the weekend and will address it tomorrow.

3.) I just need the errors to display correctly and were done!

 

Thanks again for all your help!

[Ken2k7]

1.

<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css">

See that at the bottom? Well it's CSS.

 

What's wrong with the display?

[Revlet]

1.

<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css">

See that at the bottom? Well it's CSS.

 

What's wrong with the display?

 

oh haha i didn't even notice that!

 

the errors input sequencially, not all remaining in a list...

[Ken2k7]

OH, my bad. Feel free to call me stupid.

 

var frm_err = document.getElementbyId("form_errors");
function validateForm (frm) {
   var errors = [], errno = 0;
   if (!/^[a-z]+$/i.test(frm.Name.value)) errors[errno++] = "Name is required and can only contain letters.";
   if (!/^[a-z\d]+$/i.test(frm.Title.value)) errors[errno++] = "Title is required and can only contain letters and numbers.";
   if (!/^[a-z\d]+$/i.test(frm.Company.value)) errors[errno++] = "Company is required and can only contain letters and numbers.";
   if (!/^[-.+_\da-z]+@[-.\da-z]+\.[a-z]{2,4}$/.test(frm.Email.value)) errors[errno++] = "Email is required.";
   if (errno == 0) return true;
   frm_err.style.display = "block";
   frm_err.innerHTML = "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
   return false;
}