patternjavascriptMinor
Validate a form using jQuery
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
`"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);
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:
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.
`
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.