Web topic 22 validation on web forms

Web Authoring

Topic 22 –
Validation on Web Forms

Objectives
Students should able to:
1. Using Javascript
2. Identify and use the various JavaScript
features:
• Custom and Build-in Functions
• Event Handler
• Input and Output of document text
• document.write()

Objectives
Students should able to:
3. What is form validation?
4. How is form validation carried out using
Javascript

Javascript Declarations
var ite_Class_Size = 43; All javascript
statement must
var ite Class Size = 43; end with ;

var iteClassCA = “Mr Sua”;

var htmlTeacher = new String(“Mr Sua”);

Syntax of Javascript
var result; Declare a variable called result.

result = 12 * 20; Perform arithmetic operation
and store it in variable result
alert(“The result is “ + result);

Does a string concatenation.

Display the output in a pop-up box.

Functions
A function is a collection of codes.

This set of codes will be executed by a
call to the function or an event.

Functions can be placed in either the
<head> or <body>

Functions
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script></head>
<body><form>
<input type="button" value="Click me!"
onclick="displaymessage()" />
</form>
</body>

Date object
<SCRIPT LANGUAGE=”JavaScript”>
var todayDate = new Date();
document.write("Today's Date is ")
document.write(todayDate.getDate());
document.write(todayDate.getMonth());
document.write(todayDate.getYear());
</SCRIPT>

Date object
<SCRIPT LANGUAGE=”JavaScript”>
var todayDate = new Date();
document.write(todayDate.getHours());
document.write(todayDate.getMinutes());
document.write(todayDate.getSeconds());
</SCRIPT>

Form Validation
What is form validation?
Form validation is the process of checking that a
form has been filled in correctly before it is
processed.

Form Validation
There are two main methods for validating forms:
- server-side (using CGI scripts, ASP, etc), and
- client-side (usually done using JavaScript).
Server-side validation is more secure but often
more tricky to code, whereas client-side
(JavaScript) validation is easier to do and
quicker too (the browser doesn't have to
connect to the server to validate the form).

Form Validation

Client-side form validation (usually with JavaScript embedded in the Web page)

Form Validation

Server-side form validation (usually performed by a CGI or ASP script)

Validate_Form
Example on validating forms:
Open this page
The first part of the form is the form tag:
<code />
<form name="contact_form"
method="post"action="/cgi-
bin/articles/development/javascript/for
m-validation-with-
javascript/contact_simple.cgi"onsubmit=
"return validate_form ( );">

Validate_Form
Open this page

The rest of the form prompts the user to enter their name
into a form field called contact_name, and adds a "Send
Details" submit button:
<code /><h1>Please Enter Your Name</h1><p>Your
Name: <input type="text"
name="contact_name"></p><p><input type="submit"
name="send" value="Send Details"></p></form>

Validate_Form
Open this page
<script type="text/javascript">

</script>

Web topic 22 validation on web forms

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Web topic 22 validation on web forms

Similaire à Web topic 22 validation on web forms (20)

Plus de CK Yang

Plus de CK Yang (10)

Dernier

Dernier (20)

Web topic 22 validation on web forms