Develop Reference

jQuery / JavaScript test for email && checkbox validation

How do I test for form validation for both variables: emailAddr && items[].
items[] is a checkbox array.
Currently the code below won't submit the form at all.
jQuery(document).ready(function(){
var re = /(\w+)\#(\w+)\.[a-zA-Z]/g;
var email = document.getElementById("emailAddr");
var emailValue = email.value;
var testEmail = re.test(emailValue);
jQuery("#submitForm").on("click",function(){
if (jQuery("input[name*='items']").is(":checked"),
testEmail === true){
return true;
} else {
jQuery('#messages').append("You must choose at least 1 image<br>
Please enter a valid email");
return false;
}
});
});

Cleaning up the code a little to check for the value on submission may help but I do not know exactly how the html is formatted to see why else the form may not be submitting.
var re = /(\w+)\#(\w+)\.[a-zA-Z]/g;
var email = document.getElementById("emailAddr");
jQuery("#submitForm").on("click",function(e){
var emailValue = email.value;
var testEmail = re.test(emailValue);
if (jQuery("input[name*='items']").is(":checked") && testEmail === true){
return true;
} else {
e.preventDefault(); // prevents the form from submitting if invalid
jQuery('#messages').append("You must choose at least 1 image<br>Please enter a valid email");
return false;
}
});

javascript onsubmit function not working for two input fields

I am trying to validate a form without using html5 validation as an exercise for a class, but I can't figure it out for the life of me.
I want to have an alert message pop up if the email and/or name is not valid/empty.
I have gotten to the point where the alert will pop up form the email OR the name field, depending which is first in the onsubmit function.
Any ideas would be greatly appreciated!
document.getElementById("frmContact").onsubmit = function() {
var inputEmail= document.getElementById("email").value,
emailPattern = new RegExp("^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$");
if (inputEmail==="") {
alert("Please enter your email.")
return false;
} else if (!emailPattern.test(inputEmail)){
alert("Please enter a valid email address.");
return false;
} else {
return true;
};
var inputName= document.getElementById("name").value,
namePattern = new RegExp("^[A-Za-z]+$");
if (inputName==="") {
alert("Please enter your name.")
return false;
} else if (!namePattern.test(inputName)){
alert("Please enter a valid name.");
return false;
} else {
return true;
};
};

You return after the first one is validated, so the second field is never checked. Instead, have a local variable that is set to true by default, and set to false of either of the fields fail validation, and return it at the end.
var valid = true;
// ...
if(inputEmail==="") {
alert("Please enter your email.");
valid = false;
// ...
return valid;
};

Maybe this doesn't work but the concept could be something like this...
document.getElementById("frmContact").onsubmit = function() {
var inputEmail= document.getElementById("email").value,
emailPattern = new RegExp("^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"),
error = [],
i = 0;
if (inputEmail==="") {
error.push("Please enter your email");
} else if (!emailPattern.test(inputEmail)){
error.push("Please enter a valid email address.");
}
var inputName= document.getElementById("name").value,
namePattern = new RegExp("^[A-Za-z]+$");
if (inputName==="") {
error.push("Please enter your name.")
} else if (!namePattern.test(inputName)){
error.push("Please enter a valid name.");
}
if(typeof error !== 'undefined' && error.length > 0){
alert("you submit the form correctly");
} else {
for(i = 0; i < error.length; i + 1){
alert(error[i]);
}
}
};

Javascript validation to open javascript alert on success?

First off, I don't know much about JS so please be patient with me.
I found this free validation JS and implemented it into my website, however, after a successful validation it doesn't tell you the form has been submitted.
My question is, is it possible to make this validation summon Apprise.js alert on a successful validation? Apprise
$(document).ready(function(){
//global vars
var form = $("#ContactForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var subject = $("#subject");
var subjectInfo = $("#subjectInfo");
var message = $("#message");
//On blur
name.blur(validateName);
email.blur(validateEmail);
subject.blur(validateSubject);
//On key press
name.keyup(validateName);
subject.keyup(validateSubject);
message.keyup(validateMessage);
//On Submitting
form.submit(function(){
if(validateName() & validateEmail() & validateSubject() & validateMessage())
return true
else
return false;
});
//validation functions
function validateEmail(){
//testing regular expression
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+#[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a)){
email.removeClass("error");
emailInfo.text("");
emailInfo.removeClass("error");
return true;
}
//if it's NOT valid
else{
email.addClass("error");
emailInfo.text("Please type a valid e-mail address!");
emailInfo.addClass("error");
return false;
}
}
function validateName(){
//if it's NOT valid
if(name.val().length < 4){
name.addClass("error");
nameInfo.text("Name must be atleast 4 letters (include last name)!");
nameInfo.addClass("error");
return false;
}
//if it's valid
else{
name.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
function validateSubject(){
//if it's NOT valid
if(subject.val().length < 4){
subject.addClass("error");
subjectInfo.text("Subject must be atleast 4 characters!");
subjectInfo.addClass("error");
return false;
}
//if it's valid
else{
subject.removeClass("error");
subjectInfo.text("");
subjectInfo.removeClass("error");
return true;
}
}
function validateMessage(){
//it's NOT valid
if(message.val().length < 1){
message.addClass("error");
return false;
}
//it's valid
else{
message.removeClass("error");
return true;
}
}
});

You can add a prompt dialog box alert('Your Email has been sent.'); before return true, in form.submit function.

A little help please with a contact form validator script

I have this email form validation script:
<script type="text/javascript" language="javascript">
function validateForm(thisform){
if(thisform.Name.value=="") {
alert("Ooouuupppsss... You did not enter your Name.");
thisform.Name.focus();
return false;
}
if(thisform.Email.value=="") {
alert("Ooouuupppsss... You did not enter a valid Email Address.");
thisform.Email.focus();
return false;
}
if(thisform.Subject.value=="") {
alert("Ooouuupppsss... You did not enter your Subject.");
thisform.Subject.focus();
return false;
}
if(thisform.Message.value=="") {
alert("Ooouuupppsss... You did not enter your Message.");
thisform.Message.focus();
return false;
}
}</script>
Can someone please tell me what do I have to add in this script in order to make the users enter a valid email address. Also I would like in the rest of the fields to make users to enter text (not links).
I've tried to add different pieces of code which I found on different websites but they did not work and this is because I am not sure if I am adding them right.
Thank you for reading my request.
All the best,
Andi

For e-mail checking you can use following code in else part after checking if e-mail is empty
function validateForm(){
var email = document.getElementById("email").value;
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (email.search(emailRegEx) == -1) {
alert("e-mail is not valid");
return false;
}
}
and for url with same logic you can use following regular expression
var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+#)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+#)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%#.\w_]*)#?(?:[\w]*))?)/;
following is a working example based on your work, you can improve this code it is only for showing you how it should be.
function validateForm(thisform){
if(thisform.Name.value=="") {
alert("Ooouuupppsss... You did not enter your Name.");
thisform.Name.focus();
return false;
}
else{
var name = thisform.Name.value;
if (!checkURL(name)) {
alert("name cannot be a url");
return false;
}
}
if(thisform.Email.value=="") {
alert("Ooouuupppsss... You did not enter a valid Email Address.");
thisform.Email.focus();
return false;
}
else{
var email = thisform.Email.value;
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (email.search(emailRegEx) == -1) {
alert("e-mail is not valid");
return false;
}
}
if(thisform.Subject.value=="") {
alert("Ooouuupppsss... You did not enter your Subject.");
thisform.Subject.focus();
return false;
}
else{
if (!checkURL(thisform.Subject.value)) {
alert("subject cannot contain a url");
return false;
}
}
if(thisform.Message.value=="") {
alert("Ooouuupppsss... You did not enter your Message.");
thisform.Message.focus();
return false;
}
else{
if (!checkURL(thisform.Message.value)) {
alert("message cannot contain a url");
return false;
}
}
}
function checkURL(url){
var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+#)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+#)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%#.\w_]*)#?(?:[\w]*))?)/;
if (url.search(urlRegEx) == -1) {
return true;
}
return false;
}

See this post for regex urls: regular expression for url
See this post for email validation: Validate email address in JavaScript?
See this for X browser event listening, if would use jQuery, ie8 uses attach see this: Javascript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
I would recommend looping through the form inputs, and checking if its email and if its not run the regex against the link.
(function(){
var validateForm = function(form){
var errors = [], inputs = form.getElementsByTagName('input');
for(var input = 0; input<inputs.length; input++){
var currentInput = inputs[input];
if(currentInput.value === ''){
// handle attributes here for error message, push error message
if(currentInput.attribute('name') === 'email'){
// handle email
// push error message
}
}
}
return errors;
}
var contactForm = document.getElementById('contact');
contactForm.addEventListener('submit', function(e){
var errorMessages = validateForm(contactForm);
if(errorMessages.length === 0){
} else {
e.preventDefault() // stop the form from submitting
// handle your messages
}
}
}());

How to validate CAPTCHA correctly in JavaScript?

I'm in the middle of coding CAPTCHA in JavaScript, and I'm trying to get the validation for a contact form to work properly. I'm almost there, the form won't be submitted until the CAPTCHA text-field is entered, but the problem is I'm still getting an error message when I entered the CAPTCHA code correctly.
<script>
function ValidateContactForm()
{
var name = document.ContactForm.name;
var phone = document.ContactForm.phone;
var code = document.ContactForm.code;
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter a valid phone number..");
phone.focus();
return false;
}
if (code.value == "")
{
window.alert("Please enter the code as displayed on screen.");
code.focus();
return false;
}
else if (code.value != "")
{
window.alert("Your code does not match. Please try again.");
code.focus();
return false;
}
else {
return true;
}
return true;
}
</script>
Any help would be greatly appreciated. Thanks.

Check this lines, the problem is here:
if (code.value == "")
{
window.alert("Please enter the code as displayed on screen.");
code.focus();
return false;
}
else if (code.value != "")
{
window.alert("Your code does not match. Please try again.");
^^^^^^^^^^^^^
code.focus();
^^^^^^^^^^^^^
return false;
^^^^^^^^^^^^^
}
else {
return true;
}
This code will return false every time.