There are many different ways of validating forms. This is how I decided to do it.
I’m using the input text box for First Name as an example. Since it is a required field, I’ll be checking that it is not blank. It also needs to have only letters and there’s a minimum and a maximum of characters allowed.
1st of all: Insert a link in your html to your external JavaScript file (similar to the link to your external CSS file). You can add it right after the CSS link, inside <head>:
<script type=”text/javascript” src=”external_javascript.js”></script>
2nd: create the javaScript functions :
//function to check BLANK, ONLY LETTERS & length restriction on first name:
function checkForBlankAllLetters() {
var firstNameTextBox = document.getElementById(‘firstName’);
var textBoxValue = firstNameTextBox.value;//var used on All Letters condition
var firstNameTextBoxError = document.getElementById(‘firstNameAllLettersError’);
//vars used to check all letters
//test regex pattern
var pattern= /^[a-zA-Z ]+$/;
var isMatch = pattern.test(textBoxValue);
//function check for blank
if(firstNameTextBox.value===”“) {
//alert (‘please enter your first name’);
firstNameTextBox.style.borderColor = “red”;
firstNameTextBoxError.innerHTML=”adicionar Nombre”;
return false;
}//end of function to check for Blank
//function to check for all letters
if(isMatch) {
return true;
}
else{
//alert(‘solo letras’);
firstNameTextBox.style.borderColor = “red”;
firstNameTextBoxError.innerHTML=”solo letras”;
return false;
}//end of function to check all letters
}
//Check LENGTH - min.2 max. 15 characters
function checkLength (){
var len = {min:2,max:15};
var input = document.getElementById(‘firstName’);
var firstNameTextBoxError = document.getElementById(‘firstNameAllLettersError’);
if(input.value.length>=len.min && input.value.length<=len.max){
return true;
}else{
//alert(“Please enter between ” +len.min+ ” and ” +len.max+ ” characters”);
input.style.borderColor = “red”;
firstNameTextBoxError.innerHTML=”2 a 15 letras”;
input.focus();
return false;
};
}
//Hides the red border and error message when adding valid name
function firstNameGreenBorder() {
var firstNameTextBox = document.getElementById(‘firstName’);
firstNameTextBox.style.borderColor = “green”;
document.getElementById(‘firstNameAllLettersError’).innerHTML=”“;
}
3rd: Organise the functions:
// re-organised the function above into the following:
function ValidateForm(){
//Check for blank
var isCheckForBlankValid = checkForBlankAllLetters();
//if its true call check lenght . if its return;
var isValidLenght;
if(isCheckForBlankValid){
isValidLenght = checkLength();
if(isValidLenght){
firstNameGreenBorder();
return;
}
}
}
4th: on your HTML you should have:
<form id=”formBoxes” name=”formBoxes” method=”post” action=”#”/> <!— beginning of the FORM —>
<div class=”formRow”>
<label for=”firstName”> Nombre*</label>
<input type=”text” name=”firstName” id=”firstName” onkeyup=”ValidateForm();”/>
<span id=”firstNameAllLettersError” class=”validationError”></span>
<br/>
</div>
(Following my last article about when/why we should use px or % to define the website layout).
After some time spent researching I’ve came across some interesting findings:
Fixed layouts (layouts that are fixed and don’t re-size to fit the available window width):
This seems to be the most popular.
Pros: Once we have choose the width (usually the most popular e.g. 940px, 960px etc.) we won’t be needing to test it on different screen widths. The structure and the aesthetics will be preserved.
Cons: Some users with small screens (mobile devices) may need to scroll horizontally to view the site if the fixed width is larger. Unless we provide a mobile edition, as well, that users can have access.
Liquid layouts (layouts that horizontally re-size to fit the width of a window):
Pros: the content adapts in order to use entirely the Window width. Which means that we don’t have to choose between the most popular fixed width. Liquid layouts are useful for small screen (mobile devices) which vary slightly. We have to do less work on adapting it to all possible screen sizes.
Cons: If the site re-sizes to fit horizontally, we end-up not having control on the layout as much as if it was fixed. The structure and aesthetics of the site won’t be under control. This means that at the end, probably you will end-up having to do more work to support all screen widths as we considered scenarios where the screen is really small and the menu navigation is all clustered and ugly or too far apart on a large screen.
It seems that both are a valid option. But, the issue remains:
Browsing on our mobile device is increasing heavily and for me it makes sense to create a solution that is shown properly on a mobile device. This is when a website might require CSS media queries.
My next article will be entirely dedicated to CSS media queries.
Cheers,
/*t*/
If you are new to CSS, like I am, probably you asked yourself whether or not you should be using px, em to define fonts and px or % for width and height.
After some research I found out some interesting answers. But, pls feel free to share yours.
Basically, in theory, using em instead of px will allow resizing more easily based on user preferences. But nowadays, as I understood, modern browsers can resize px layouts as well as em layouts so it might not be as relevant as it was some years ago. (Here’s an article from 2007 that shows that maybe back then it was more relevant to question this: http://green-beast.com/blog/?p=199)
BUT, What about mobile browsers? How the use of one or the other will be better off for mobile devices?
Apparently, Mobile browsers handle px perfectly, because they are using for rendering not usual physic pixel but screen pixel: “px won’t be a real actual pixel when the screen is zoomed out on a modern mobile browser. These browsers are effectively emulating a desktop browser with desktop browser-size pixels.”
Basically, it doesn’t make any difference when it comes to px and em. However, percentages might still be useful for widths and heights. I will have to take a closer look at fixed width versus liquid layouts and come back with a proper answer. However, for fonts apparently you should use what you prefer.
Do you agree?
Cheers.
T.
When we call a function, the return value from it would be the result from the function call and can be used just like any other value in JavaScript.
Example1:
// Define quarter here.
var quarter = function (x) {
return x/4;
};
quarter (4);
if (quarter(4) === 1) {
console.log(“The statement is true.”);
} else {
console.log(“The statement is false.”);
}
Example2:
//Define cube here.
var cube = function (x) {
return x*x*x;
};
cube (3);
===> 27
Example3:
//it is possible for one function to make use of another function.
// Define square and cube here.
var square = function (x) {
return x*x;
};
var cube = function (x) {
return square (x)*x;
};
cube (3);
===>27
Example4:
//Here we defined a function isMultipleOfThree that is used to check if a number is a //multiple of the number 3.
//The function isNotMultipleOfThree is used to check the opposite, and we have //defined it in terms of isMultipleOfThree:
var isMultipleOfThree = function (x) {
return (x % 3 === 0);
};
var isNotMultipleOfThree = function (x) {
return !isMultipleOfThree (x) ;
};
Example5:
//This time, the aim is to define one function in terms of the other using the ! symbol.
//Define isOdd, and then define isEven in terms of isOdd.
var isOdd = function(x) {
return (x % 2 !== 0 ? true : false);
};
var isEven = function(x) {
return !isOdd(x);
};
To define a function, use var like you do for declaring a variable:
For ex., print hello twice:
var i = 0;
var hello = function (){
// print hello on the console
console.log (“I am saying hello”);
};
while (i = 0; i<2){
console.log (“I am saying hello”);
i++;
};
