is2802 introduction to multimedia applications for business lecture 5: javascript, form validation...
TRANSCRIPT
IS2802 Introduction to Multimedia Applications for BusinessLecture 5: JavaScript, form validation and browser detectionRob Gleasure
www.robgleasure.com
Lecture Outline
The Navigator object A refresher on HTML forms Form validation using JavaScript Exercise
The Navigator object
The Navigator object contains all information about the browser being used to view a page, e.g. the browser name, version, whether they have cookies enabled, etc
The most commonly used are probably: navigator.appCodeName // returns the name of the browser navigator.appVersion // return the version of the browser navigator.cookieEnabled // returns whether cookies are enabled
A complete reference can be found at http://www.w3schools.com/jsref/obj_navigator.asp
The Navigator object
Copy the following code into a new file and save it as browserDetails.html
<html>
<body>
<p id="details"></p>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("details").innerHTML=txt;
</script>
</body>
</html>
HTML Forms
Forms are a vital tool to allow users to input data
Forms can take a chunk of user input and bind it so it can be sent for processing on a server, e.g. to save it to a file/files, email it to a specified account, gather and return relevant information for the user, etc
Any form contains a number of form elements
Text Fields
Small rectangular fields that allow a user to input text, submitting it to the appropriate web server
Commonly seen in search boxes
Text Fields
Three attributes of interest
<input type="text"
size=“10"
maxlength="5"
value=“some text to overwrite" />
States width of text-field
States maximum characters allowed
Gives default text to appear in the text-field
Checkboxes
Checkboxes are useful for obtaining yes/no decisions from users
Checkboxes
There are two attributes of interest
<p> Pay way more than you should for luggage?
<input type="checkbox"
checked=“yes"
name=“options" /> </p>
Gives default answer “yes”
Provides an ID by which the field can be referred
Radio Buttons
Radio buttons allow a to choose only one of a selection of options
Radio Buttons
There are two attributes of interest
<p> Do you have any allergies? <br/>
Nuts: <input type="radio" value = “nuts” name=“allergies" />
Cheese: <input type="radio" value = “cheese” name=“allergies" />
Cat hair: <input type="radio" value = “cats” name=“allergies" />
</p>
States the value that will be submitted if checked
Provides an ID which tells which group of radio buttons the field belongs to
Text Areas
Text-areas allow the input of large chunks of text from the user
Often used in blogs, etc,
or as a prompt for unusual
requests
Specific <textarea> tag
used for each individual
text-area
Text Areas
Five attributes are of interest
<textarea cols="20" rows="5" wrap="hard“
disabled = “no” readonly = “no”>
Default text goes in here…
</textarea>
States width of the text-area
Ensures that the text is ‘wrapped’ within the boundaries of the text-area. Can be “hard”, “soft” or “off”.
States height of the text-area
States that text cannot be modified within the text-area
States that text within the text-area is ‘greyed out’
Selection Forms and Drop-Down Lists Selection Forms are usually used when >1 option may be selected,
whilst Drop-Down Lists are common when only one choice is possible
Syntax is similar to ordinary
HTML lists, with each list item
enclosed within tags within
the greater list tag
<select>
<option>text here</option>
<option>other text here</option>
</select>
Selection Forms and Drop-Down Lists There are three attributes of interest
<select size=“5" multiple=“yes">
<option>Cork</option>
<option>Kerry</option>
<option selected = “yes”>Waterford</option>
</select>
States whether >1 option can be selected (doesn’t work with drop-down lists)
States how many options are displayed (1 or less results in a drop down box, >1 results in a selection form)
States whether any option is selected by default
Submit Buttons
When the user clicks on the "Submit" button, the content of the form is sent to the server
<input type="submit" value="Submit these details" />
A submit button must be inside a <form> element to do anything at all
This specifies the text to appear on the button
Password Entry
Password buttons are identical to regular text-fields, except the text you are typing is replaced with stars, dots, etc, in the browser window (so your password can’t be read over your shoulder).
<input> attribute ‘type’ must = “password”
<input type="password" size="5" maxlength="5" />
This does not mean your password is encrypted, or changed at all – it just ensures it is not visible to physical onlookers
Reset Buttons
Reset buttons are simply buttons which restore the input fields on your form to their default setting
<input> attribute ‘type’ must = “reset”
<input type="reset" value="Reset fields?" />
Form Actions and Methods
There are two important attributes of the <Form> element. Both of these are concerned with how the form passes information back to the script that will process the input.
The Action attribute
specifies the location of the CGI script which handles the input from the user
The Method attribute
either = “GET” or “POST” (“GET” is the default)
These differ in how they encode data
Form Actions and Methods
The main difference between “GET” and “POST” is how the data is encoded The GET method appends the values from the form onto the end
of the URL The POST method stores all the “posted” values from a form into
an associative array called “$_POST”
the different values can then be referenced using their names as an index
We’ll come back to this when we’re covering PHP
Form Validation with JavaScript We can use JavaScript to catch a certain amount of bad input from
users. These checks include: If text input is empty If text input is all numbers If text input is all letters If text input is alphanumeric If text input has the correct number of characters If a selection has been made from a drop down selector If an email address is valid
Regular expressions
We perform many of these validation checks on the basis of regular expressions A regular expression is an object that describes a pattern of
characters. Regular expressions are used to perform pattern-matching and
"search-and-replace" functions on text.
You don’t often need to know how they work, as you can just search for appropriate instances.
Ensuring Forms are Not Blank<html>
<head>
<script type='text/javascript'>
function leftBlank(formElement, warning){
if(formElement.value.length == 0){
alert(warning);
}
}
</script>
</head>
<body>
<form> <input type='text' id='customer name'/>
<input type='button'
onclick="leftBlank(document.getElementById('customer name'), 'Enter name')" value='Check Field' />
</form>
</body>
</html>
Ensuring a Selection is Made
<html>
<head>
<script type='text/javascript'>
function isSelection(elem, message){
if(elem.value == "Select a gender"){
alert(message);
}
}
</script>
</head>
<body>
<form> <select id='selection'>
<option>Select a gender</option>
<option>Male</option>
<option>Female</option>
</select>
<input type='button' onclick="isSelection(document.getElementById('selection'),
'Choose Male or Female')" value='Check Field' />
</form>
</body>
</html>
Restricting the Length of Input<html>
<head>
<script type='text/javascript'>
function ensureLength(elem, min, max, message){
var userName = elem.value;
if(userName.length < min || userName.length > max){
alert(message);
}
}
</script>
</head>
<body>
<form> <input type='text' id='user name'/>
<input type='button'
onclick="ensureLength(document.getElementById('user name'), 4, 8, 'User name must be between 4 and 8 characters')"
value='Enter a user name' />
</form>
</body>
</html>
Ensuring Input is Alphabetic
<html>
<head>
<script type='text/javascript'>
function isNumeric(elem, message){
var alphabeticExpression = /^[a-zA-Z]+$/;
/* This is a a regular expression /^[0-9]+$/ that will only match if the
string is all letters and is at least one character long */
if(!elem.value.match(alphabeticExpression )){
alert(message);
}
}
</script>
</head>
<body>
<form> <input type='text' id='country'/>
<input type='button'
onclick="isNumeric(document.getElementById('country'), 'Not a country')"
value='Enter the country of the shipping address' />
</form>
</body>
</html>
Ensuring Input is Numeric
<html>
<head>
<script type='text/javascript'>
function isNumeric(elem, message){
var numericExpression = /^[0-9]+$/;
/* This is a a regular expression /^[0-9]+$/ that will only match if the
string is all numbers and is at least one character long */
if(!elem.value.match(numericExpression)){
alert(message);
}
}
</script>
</head>
<body>
<form> <input type='text' id='credit card'/>
<input type='button'
onclick="isNumeric(document.getElementById('credit card'), 'Not valid card')"
value='Enter credit card number' />
</form>
</body>
</html>
Ensuring Input is Alphanumeric<html>
<head>
<script type='text/javascript'>
function isAlphaNumeric(elem, message){
var alphaNumericExpression = /[0-9a-zA-Z]/;
/* This is a regular expression /[0-9a-zA-Z]/ that will only match if the
string contains either letters or numbers, and is at least one character long */
if(!elem.value.match(alphaNumericExpression )){
alert(message);
}
}
</script>
</head>
<body>
<form> <input type='text' id='street'/>
<input type='button'
onclick="isAlphaNumeric(document.getElementById('street'), 'Include the street name and number')"
value='Enter the street of the shipping address' />
</form>
</body>
</html>
Validating an Email Address
<html>
<head>
<script type='text/javascript'>
function emailValidator(elem, Message){
var emailExpression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
/* This expression checks to ensure the input follows the syntax of
if(!elem.value.match(emailExpression)){
alert(Message);
}
}
</script>
</head>
<body>
<form> <input type='text' id='emailer'/>
<input type='button' onclick="emailValidator(document.getElementById('emailer'),
'Not a Valid Email Address')" value='Enter email address' />
</form>
</body>
</html>
Exercise
Save the following text in a new file called lecture5.html
<html>
<head>
<script type="text/javascript">
function formSubmit() {
document.getElementById("myForm").submit();}
</script>
</head>
<body>
<p>Enter your details and press the "Submit form" button to submit the form.</p>
<form id="myForm" action="http://corvus2.ucc.ie/phd/rgleasure/is2815/example.php" method="get">
First name: <input type="text" name="firstName" /><br />
Last name: <input type="text" name="lastName" /><br />
Home address: <input type="text" name="homeAddress" /><br />
Email address: <input type="text" name="emailAddress" /><br />
<input type="button" onclick="formSubmit()" value="Submit form" />
</form>
</body>
</html>
Exercise
Validate the page, such that The name and first name must be alphabetic The address must be alphanumeric The email address must be valid
References and Further Reading http://www.w3schools.com/html/html_forms.asp http://www.javascriptkit.com/javatutors/re.shtml http://www.w3schools.com/js/js_form_validation.asp