Hi,

 

Can someone explain what I have done wrong within my JS Validation script please?!?!?

Im not the best at JS and have used and modified some coding I have found on the web.

 

The problem im having is when ive added the (!isEmail) section (See below) the form sends but doesnt seem to do the checks?

 

Thanks!!

 

 

function checkForm() {
Name = document.getElementById("Name").value;
Email = document.getElementById("Email").value;
Comments = document.getElementById("Comments").value;

 if (trim(Name) == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("Name").select();
document.getElementById("Name").focus();
 return false;

 } else if (trim(Email) == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("Email").select();
document.getElementById("Email").focus();
 return false;

} else if (!isEmail(trim(Email))) {           //This section not working correctly?????????????????????
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("Email").select();
document.getElementById("Email").focus();

 } else if (trim(Comments) == "") {
hideAllErrors();
document.getElementById("commentsError").style.display = "inline";
document.getElementById("Comments").select();
document.getElementById("Comments").focus();
 return false;
 }
 return true;
 }

 function hideAllErrors() { //Function to hide all errors showing up at once.
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentsError").style.display = "none"
 }

 function trim(str) //Function to check for whitespace as JS does not have Trim built in like php.
{
  return str.replace(/^\s+|\s+$/g,'');
}

function isEmail(str)
{
  var regex = /^[-_.a-z0-9]+@(([-_a-z0-9]+\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|b
f|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn
|
co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|f
i
|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|
h
n|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|
k
w|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq
|
mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|n
z
|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd
|
se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp
|
tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw
)
|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i;

return regex.test(str);
}

Bump...!

Anybody help me out??!!?!

Basically, you can't enter line breaks within your regex expression, otherwise it breaks it.

Make it so that the regular expression is all on one line then it'll work.

 

Tried and tested

maybe use validation on html level, before sending email ?...

Its easier and much faster to do...

I have written all of the regex code on one line, in the original code.

 

It will send when I hit the submit button, even if i have no email address entered?!

I have written all of the regex code on one line, in the original code.

 

I get this error when hitting submit:

Parse error: syntax error, unexpected '}' in /home/sites/huwrowlands.co.uk/public_html/huw/contact/contact.php on line 27

 

Please help!

 

That's a PHP error and nothing to do with the Javascript.

What code do you have in contact.php?

OK sorry Mr Bright Side! Ive sorted the PHP error now!!!!

 

Email is being sent, but the form isnt being checked??

I haev my regex on one line too.

I have written all of the regex code on one line, in the original code.

 

It will send when I hit the submit button, even if i have no email address entered?!

 

This portion of the code:

else if (!isEmail(trim(Email))) { //This section not working correctly?????????????????????
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("Email").select();
document.getElementById("Email").focus();

}

 

needs to be modified to:

else if (!isEmail(trim(Email))) { //This section not working correctly?????????????????????
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("Email").select();
document.getElementById("Email").focus();
return false;
}

 

The return false line will tell your form that it's invalid and should stop it from being submitted.

Ok added that. Silly me.

Just tried it out and its still sending without checking.

 

Im baffled?

 

Im a real pain arent i!!

OK, I tried creating the pages on localhost and trying it all out for myself. I've attached the Javascript code I used (doesn't make a difference if it's external or inline)

 

I made a simple form:

<form onsubmit="return checkForm()" >
<div>
<input id="Name" type="text" />
<span id="nameError">No name</span>
</div>
	<div>
<input id="Email" type="text" />
<span id="emailError">No email</span>
</div>
	<div>
<input id="Comments" type="text" />
<span id="commentsError">No comment</span>
</div>
<input type="submit" id="submitagain" />
</form>

 

That seems to work fine for me, everything validates properly.

If you're still getting problems try using the Error Console in Firefox to find out what the problem actually is and post that here.

 

Even double checked on the the W3Schools Tryit Editor, and its fine on there too

validate.txt

Here is the working link to my form: contact form

 

Try not entering any data and it'll still send to my email.

 

The error console is giving me a heap of errors saying 'empty string passed to getElementById()' ? ? ?

 

How come it can work fine for you?!

welshhuw

Send me html file plz.

I will make for u this validation m8...

welshhuw

Send me html file plz.

I will make for u this validation m8...

 

3 files - contact page, thanks page, and js script

 

Thanks!!

contact.html

ok.html

ok.html

just edited contact.html

Here you go m8.

contact.html

just edited contact.html

Here you go m8.

 

 

Cheers! Your script is beyond my skill level!! But thanks for your help.

 

Here is the working link to my form: contact form

 

Try not entering any data and it'll still send to my email.

 

The error console is giving me a heap of errors saying 'empty string passed to getElementById()' ? ? ?

 

How come it can work fine for you?!

 

The link you gave doesnt work:

Not Found

 

The requested URL /contact.html was not found on this server.

 

How are you calling the validation?

I used the onsubmit event on the form:

<form onsubmit="return checkForm()">

 

Attached are a copy of the files I used

 

EDIT: Here's a link to the form working (uploaded the attached files): link

Archive.zip

The link you gave doesnt work:

 

 

How are you calling the validation?

I used the onsubmit event on the form:

<form onsubmit="return checkForm()">

 

Attached are a copy of the files I used

 

EDIT: Here's a link to the form working (uploaded the attached files): link

 

resolved! thanks you very much Mr Bright Side.

Somehow the return checkForm() got deleted off the contact.html page??? must have been too many 'undo' clicks!

Embarassing. Thanks for sticking with me.

 

Now, just for the PHP side!!! (God help me)

resolved! thanks you very much Mr Bright Side.

Somehow the return checkForm() got deleted off the contact.html page??? must have been too many 'undo' clicks!

Embarassing. Thanks for sticking with me.

 

Now, just for the PHP side!!! (God help me)

 

That's great to hear!

If you need help with the PHP side let me know, my PHP is a lot better than Javascript