CITS1231 Web Technologies

Size: px

Start display at page:

Download "CITS1231 Web Technologies"

Basil Rogers
5 years ago
Views:

1 CITS1231 Web Technologies Client side id Form Validation using JavaScript

2 Objectives Recall how to create forms on web pages Understand the need for client side validation Know how to reference form elements Know how to access properties of form elements including dynamic and user controlled ones Be able to use an onsubmit event handler Use alerts and focus to give validation feedback Be aware of simple number and text functions which can be used in validation Understand the need for further server side validation 2

3 Recall how to create forms <body> <form name= myform" id= myform" method="post" action= normal HTML plus eg <input tt type="radio" " name= bookchoice" value= book" k"/ /> </form> </body> 3

4 Input types <input type= > text (=default) is a one line text input box button, checkbox, file, radio etc reset and submit (buttons) textareas and selection are other possible input elements in a form. 4

5 Client side validation Advantages User needs feedback on their inputs Checks done on their computer (as opposed to those done when the data reaches a server) are called client side validation This isquicker (no network transfer) This reduces server load This can more easily indicate where the error is This can be done in real time (as user fills in each input) 5

6 Client side validation What can we check? Check that t required dinputs are not lftbl left blank Check that dates, post codes, credit card numbers, phone numbers, s etc are in correct format Fill in derived information, such as total amount of order with various items, various quantities and extras (eg tax and shipping) Do some initial processing, such as removing spaces from numbers, putting usernames in upper case, etc Guide the order of the user filling in the inputs 6

7 Referencing a Form Say that t <form name= fname id= fid > > is the first and only form. Then the form itself can be referenced via any of the following: document.fname document.forms[0] document.forms[ fid ] document.getelementbyid( fid ) 7

8 Referencing Form Elements The first element in the form fname <input name= elname id= elid > is referenced via: document.fname.elname document.fname.elements[0] document.fname.elements[ elid ] document.getelementbyid( elid ) 8

9 Access properties of elements We can set the values of input tfields, eg document.fname.bday.value= 31 st January 1997 ; This sets the contents (=value) of the text input named bday We can also access the current values of attributes of input elements such as: defaultvalue, maxlength, type, size 9

10 Real time validation In order to process input or alert tthe user to errors as they type we use event handlers such as onchange. This is activated when a user clicks away from an input after changing the contents. Eg, <input type="text" id= elid onchange= elid.touppercase()"/> The javascript function touppercase() is called when the user clicks away from elid. 10

11 alert() The JavaScript t l alert method pops up a warning dialog with a short message for the user. This is useful during real time valdiation. Eg function checknamenotempty(){ if (document.fname.namebox.value== ) alert( Please enter your name ); } 11

12 focus() After detecting problems with a form it is also useful to highlight the input element which needs attention. The focus method transfers the cursor to the object which it is called upon. Eg, document.fname.elname.focus(); This could be used after an alert. This can also be used to move the cursor along to the next input as the user fills in the form. select() is similar, for selecting a field on a form. 12

13 Batch validation Real time validation and alerts can be very helpful lto the user but they can still ignore all such checks and messages and press the submit button on the form. It is possible to do one last check on the input data at this stage. We want to check all the input data at once at this stage so it is called batch validation If there are any errors then we do not want to submit the form s dt data Instead we want to highlight one or more of the errors If there are no errors then the data is sent off. 13

14 onsubmit event handler The onsubmit event handler allows a batch bthvalidation. Add the event handler to the form tag: <form onsubmit= return function() > The function can be any JavaScript function but it must return a boolean value (true/false). If it returns true then submission goes ahead. If it returns false then there is no submission. There is also an onreset event handler. 14

15 Example See the file Look at its source code and its behaviour 15

16 Useful Validation functions Input values are treated t as strings ti of characters. If numbers are needed then we must use JavaScript to convert the string to a number. The built in parsefloat() method does this. Eg, priceval = parsefloat(document.fname.price.value); qtyval= parsefloat(document.fname.qty.value); total = priceval*qtyval; 16

17 String Operations These are commonly needed in validation tests. Eg, test if two strings are equal or not equal (!=) if (document.fname.elname.value== no ) elname Find length of a string: ti mystring.length>3 ti l th 3 Convert a string to uppercase: mystring.touppercase ( ) mystring.slice l ( start, end ) makes a substring mystring.charat ( index ) finds a character at the indexed location 17

18 Selections and JavaScript Recall llthe syntax of a selection element on a form Using JavaScript we can find the index (0,1,2, ) of the option currently selected by the user: var index=document.fname.testselect.selectedindex; And we can use that to find the corresponding value: document.fname.testselect.options[index].value 18

19 Server side validation Even after client side id validation of a form, whether hth it is realtime or batch validation or both, it is still important to arrange for server side validation of the submitted data The server has access to extra information, and extra computing power and so can perform other checks It is also possible for data to be sent to the server program from other sources than the purpose built form. So we can not assume the client side checks have been done anyway. 19

20 Summary Client side form validation is important JavaScript allows real time and batch validation of form data Event handlers such as onchange allow real time checks as the user fills in the form The onsubmit event handler allows a final check of the whole form (and can prevent submission if needed). JavaScript functions support checking of user values. The difference between onblur and onchange. onblur occurs whether or not the user has typed in the field, and onchange occurs only if the user changed the contents 20

New Perspectives on Creating Web Pages with HTML. Tutorial Objectives

New Perspectives on Creating Web Pages with HTML Tutorial 9: Working with JavaScript Objects and Events 1 Tutorial Objectives Learn about form validation Study the object-based nature of the JavaScript