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

More Related Content

Viewers also liked (20)

Similar to Web topic 22 validation on web forms (20)

More from CK Yang (10)

Recently uploaded (20)

Web topic 22 validation on web forms