How to validate numbers only and email format in contact form

[ezenne]

Hi!
I would like to show you guys the JavaScript that i using for my contact form


/*----- Code goes here by clicking the link -----*/

http://web.ezenne.com/js/completeValid.js

The above code was copied from a Youtube tutorial about JavaScript.

I would like to ask, what additional code should be added in the existing code in order to validate the numbers only and an email format before the form to be submitted?

Thanks!

Regards,
Ezenne

[Philip M]

I would like to ask, what additional code should be added in the existing code in order to validate the numbers only and an email format before the form to be submitted?

Form validation has been covered a zillion times in this forum. Try using the Search feature.

Regex to permit only numbers in the field:-

if (/[^0-9]/gi.test(numericField.value)) { // invalid


Regex to check valid email:-

if (!/^([a-z0-9])([\w\.\-\+])+([a-z0-9]?)\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(emailfield.value)) { // invalid


http://web.ezenne.com/js/completeValid.js is not a valid url.



Quizmaster: What is the capital of Poland?
Contestant: Auschwitz.

[ezenne]

How to validate numbers only and email format in contact form

Originally posted by Philip M:
Regex to permit only numbers in the field:-

if (/[^0-9]/gi.test(numericField.value)) { // invalid


Regex to check valid email:-

if (!/^([a-z0-9])([\w\.\-\+])+([a-z0-9]?)\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(emailfield.value)) { // invalid


---------------------------------------------

Hi Philip M,

I've no idea how to add the code that you provided in my existing code.

For example:

/*---- Example begins ----*/
This is to validate the empty space in the column.

if(Name.value == ''){
msg+= 'Please enter your name! \n';
Name.className = 'inpBoxError';
}

------------------------------------
This is to validate the minimum length

if(Name.value.length < 5){
msg+= 'Name is too short! \n';
Name.className = 'inpBoxError';
}

------------------------------------
How to put the numbers validation code that you provided in this code?

if(Phone.value == ''){
msg+= 'Please enter your phone number! \n';
Phone.className = 'inpBoxError';
}

------------------------------------
And how to put the email validation code in this code?

if(Email.value.length < 4){
msg+= 'Please enter your valid email address! \n';
Email.className = 'inpBoxError';
}

/*---- Example ended ----*/

Can you show me the way?
I would really appreciate your help. =)

Thank you! =)

Regards,
Ezenne

[Philip M]

How to put the numbers validation code that you provided in this code?

if(Phone.value == ''){
msg+= 'Please enter your phone number! \n';
Phone.className = 'inpBoxError';
}

if ((Phone.value.length<10)||(/[^0-9]/gi.test(Phone.value))) { // invalid - must be minimum of 10 digits only
msg+= 'Please enter your phone number without spaces or hyphens! \n';
Phone.className = 'inpBoxError';
}

And how to put the email validation code in this code?

if(Email.value.length < 4){
msg+= 'Please enter your valid email address! \n';
Email.className = 'inpBoxError';
}

if (!/^([a-z0-9])([\w\.\-\+])+([a-z0-9]?)\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(Email.value)) { // invalid
msg+= 'Please enter your valid email address! \n';
Email.className = 'inpBoxError';
}

You can improve your name validation as follows:-

// This is to validate the minimum length and only valid characters in the field

Name.value = Name.value.replace(/[^a-z\s\'\-\.]/gi,"";  // strip all but letters space hyphen apostrophe period
Name.value = Name.value.replace(/\s{2,}/g," ");  // Replace multiple spaces with one space
if (Name.value.length < 2) {  // an English proper name must have at least two letters - Al, Jo.
// there are plenty of surnames of only three letters
msg+= 'Name is too short or contains invalid characters! \n';
Name.className = 'inpBoxError';
}

[ezenne]

How to validate numbers only and email format in contact form

Hi Philip M,
Thank you very much for your helps!
They are all working fine for me. Amazing!!

Do you have any tutorial sites for me to learn a proper Java Script?
I am only know well in CSS and HTML.
Have to go to a higher level in website creation.

Again, thank you very much for your help in coding issue! =)

Regards,
Ezenne

[Philip M]

The best resource apart from this forum is W3Schools Online Web Tutorials
www.w3schools.com/ (although some sections are somewhat dated). Also http://www.javascriptkit.com/

[ezenne]

How to validate numbers only and email format in contact form

Hi Philip M,
Thanks for your suggestions!

That's a great sites with lots of knowledges that we can learn.

Thank you very much.

Regards,
Ezenne