Web Authoring        Topic 22 –Validation on Web Forms
ObjectivesStudents should able to:1. Using Javascript2. Identify and use the various JavaScript    features:  • Custom and...
ObjectivesStudents should able to:3. What is form validation?4. How is form validation carried out using   Javascript
Javascript Declarationsvar ite_Class_Size = 43;     All javascript                             statement mustvar ite Class...
Syntax of Javascriptvar result;         Declare a variable called result.result = 12 * 20;       Perform arithmetic operat...
FunctionsA function is a collection of codes.This set of codes will be executed by acall to the function or an event.Funct...
Functions<head><script type="text/javascript">function displaymessage(){      alert("Hello World!");}</script></head><body...
Date object<SCRIPT LANGUAGE=”JavaScript”>    var todayDate = new Date();    document.write("Todays Date is ")    document....
Date object<SCRIPT LANGUAGE=”JavaScript”>    var todayDate = new Date();    document.write(todayDate.getHours());    docum...
Form ValidationWhat is form validation?Form validation is the process of checking that aform has been filled in correctly ...
Form ValidationThere are two main methods for validating forms:- server-side (using CGI scripts, ASP, etc), and- client-si...
Form ValidationThere are two main methods for validating forms:  Client-side form validation (usually with JavaScript embe...
Form ValidationThere are two main methods for validating forms:    Server-side form validation (usually performed by a CGI...
Validate_FormExample on validating forms:   Open this page  The first part of the form is the form tag:  <code />  <form n...
Validate_FormExample on validating forms:   Open this page  The first part of the form is the form tag:  <code />  <form n...
Validate_FormExample on validating forms:   Open this page   The rest of the form prompts the user to enter their name   i...
Validate_FormExample on validating forms:   Open this page   <script type="text/javascript">   <!--   function validate_fo...
Upcoming SlideShare
Loading in …5
×

Web topic 22 validation on web forms

831
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
831
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web topic 22 validation on web forms

  1. 1. Web Authoring Topic 22 –Validation on Web Forms
  2. 2. ObjectivesStudents should able to:1. Using Javascript2. Identify and use the various JavaScript features: • Custom and Build-in Functions • Event Handler • Input and Output of document text • document.write()
  3. 3. ObjectivesStudents should able to:3. What is form validation?4. How is form validation carried out using Javascript
  4. 4. Javascript Declarationsvar ite_Class_Size = 43; All javascript statement mustvar ite Class Size = 43; end with ;var iteClassCA = “Mr Sua”;var htmlTeacher = new String(“Mr Sua”);
  5. 5. Syntax of Javascriptvar result; Declare a variable called result.result = 12 * 20; Perform arithmetic operation and store it in variable resultalert(“The result is “ + result); Does a string concatenation.Display the output in a pop-up box.
  6. 6. FunctionsA function is a collection of codes.This set of codes will be executed by acall to the function or an event.Functions can be placed in either the<head> or <body>
  7. 7. 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>
  8. 8. Date object<SCRIPT LANGUAGE=”JavaScript”> var todayDate = new Date(); document.write("Todays Date is ") document.write(todayDate.getDate()); document.write(todayDate.getMonth()); document.write(todayDate.getYear());</SCRIPT>
  9. 9. Date object<SCRIPT LANGUAGE=”JavaScript”> var todayDate = new Date(); document.write(todayDate.getHours()); document.write(todayDate.getMinutes()); document.write(todayDate.getSeconds());</SCRIPT>
  10. 10. Form ValidationWhat is form validation?Form validation is the process of checking that aform has been filled in correctly before it isprocessed.
  11. 11. Form ValidationThere 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 oftenmore tricky to code, whereas client-side(JavaScript) validation is easier to do andquicker too (the browser doesnt have toconnect to the server to validate the form).
  12. 12. Form ValidationThere are two main methods for validating forms: Client-side form validation (usually with JavaScript embedded in the Web page)
  13. 13. Form ValidationThere are two main methods for validating forms: Server-side form validation (usually performed by a CGI or ASP script)
  14. 14. Validate_FormExample 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 ( );">
  15. 15. Validate_FormExample 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 ( );">
  16. 16. Validate_FormExample on validating forms: 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>
  17. 17. Validate_FormExample on validating forms: Open this page <script type="text/javascript"> <!-- function validate_form ( ) { valid = true; if ( document.contact_form.contact_name.value = = "" ) { alert ( "Please fill in the Your Name box." ); valid = false; } return valid; } //--> </script>

×