HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Validate a form using jQuery

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
validateformjqueryusing

Problem

I am validating a form using jQuery.

It is working perfectly, but I just feel the code is quite "bulky". There is a lot of if statements being used to achieve this logic in the app.sendForm.init() function. I think this could be tidied and any advice here would be greatly appreciated. Perhaps I should be using a switch statement instead?



`"use strict";
/*
create namespace to prevent
cluttering of the global namespace
*/
var app = app || {};
(function(){

app.initialize = {
init: function() {
app.sendForm.init();
}
};

app.sendForm = {
init: function(){
$("#entry").submit(function( event ) {
var userEmail = $("#email"),
userName = $("#first_name"),
userLastName = $("#last_name"),
date = $("#birth_day"),
month = $("#birth_month"),
year = $("#birth_year"),
contestName = $("#contest1_name"),
countryName = $("#country"),
privacyCheck = $('#privacy_check');

if (![contestName, date, month, year, countryName, userName, userLastName]
.every(app.validation.empty) || !app.validation.dateOfBirth(date, month, year) || !app.validation.email(userEmail) ) {
event.preventDefault();
alert("There are errors with your form.");

//set invalid class on form elements if errors
app.setInvalidClass.init(!app.validation.email(userEmail), userEmail);
app.setInvalidClass.init(!app.validation.empty(userName), userName);
app.setInvalidClass.init(!app.validation.empty(userLastName), userLastName);
app.setInvalidClass.init(!app.validation.empty(contestName), contestName);
app.setInvalidClass.init(!app.validation.empty(countryName), countryName);

Solution

First of all: Very long lines are stressful for the eyes to follow. So using more line breaks would be nice.

Second: You got an error in your code.

Third: I would structure it different.

Might not be the ideal way. It's just the way I would do it:



"use strict";
/*
create namespace to prevent
cluttering of the global namespace
*/
var app = app || {};

app.validation = {

//Validate email address.
email: function(id) {
var emailVal = id.val(),
re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(emailVal);
},

//Check if value is empty.
empty: function(id) {
var elementVal = $.trim(id.val());
if(elementVal.length > 0)
return true;
},

//Check user's age.
dateOfBirth: function(date, month, year) {
var forbiddenAge = 14;
var DOB = date.val() + " " + month.val() + " " + year.val();
var today = new Date();
var birthDate = new Date(DOB);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m
body {
background-color: #fff;
color: #000;
font-family: 'Arial', sans-serif;
margin: 0;
}

#entry {
font-family: 'Arial', sans-serif;
max-width: 400px;
margin: 0 auto;
}

#entry input,
#entry select {
display: block;
margin-bottom: 10px;
}

#entry label {
padding-bottom: 5px;
}

#entry #birth_day,
#entry #birth_month,
#entry #birth_year {
display: inline-block;
}

#entry input[type=submit] {
display: block;
border: 1px solid #1e1e1e;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
text-decoration: none;
color: #fff;
line-height: 20px;
letter-spacing: .5px;
max-width: 150px;
height: 40px;
padding: 0 10px;
background: #1e1e1e;
text-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
font-weight: 400;
margin-top: 15px;
}

#privacy {
font-size: 12px;
}

.invalid {
border-color: #ed0000;
background-color: #ffd8d8;
}


For full functionality of this site it is necessary to enable JavaScript.
Here are the
instructions how to enable JavaScript in your web browser.



First name:


Last name:


Country/Region

Select Your Country/Region
United Kingdom
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Bolivia
Bosnia and Herzegovina
Botswana
Bouvet island
Brazil
British Indian Ocean Territory
Burundi
Cambodia


Email:


Date of Birth

DD
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


MM
January
February
March
April
May
June
July
August
September
October
November
December


YYYY
2007
2006
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996
1995
1994
1993
1992
1991
1990
1989
1988
1987
1986
1985
1984
1983
1982
1981
1980
1979
1978
1977
1976




I have read and understood the Terms and Conditions.



`

Context

StackExchange Code Review Q#129354, answer score: 3

Revisions (0)

No revisions yet.