Form Validation
•Download as PPTX, PDF•
0 likes•1,315 views
This document describes how to validate a form in JavaScript before submission. It includes the XHTML markup for a form with six fields, including four text fields, one dropdown, and one textarea. JavaScript functions are used to enable the submit button when a field is clicked and check that required fields are filled out, displaying an error message if not. Styling is added with CSS. On successful validation, the form will submit, with a confirmation message displayed upon completion.
More Related Content
What's hot
What's hot (18)
Viewers also liked
Similar to Form Validation
Similar to Form Validation (20)
More from Graeme Smith
More from Graeme Smith (20)
Recently uploaded
Recently uploaded (20)
Form Validation
- 1. Form Validation A Simple Javascript Exercise
- 2. Sending eMessages A alternative to email Message is stored in company database But how do we check that the requires fields are filled in? Do this at the client side using javascript
- 3. The Form Six fields – the first four are of type="text", the fifth is a drop down selectlistbox, and the last is a textarea. Note that the submit button is disabled.
- 4. The XHTML Markup #1 <body> <imgsrc="bdlogo.gif“ /> <form id="emessage" method="post" action="msgadd.php"> <fieldset style="border:none"> ………. </fieldset> </body> First, the image, form and fieldset tags. Remember that the XHTML Strict doctype requires all form elements to be contained inside a fieldset or similar structure . Note also that the name attribute is not used in the form tag, instead we use id.
- 5. The XHTML Markup #2 <body> <form id="emessage" method="post" action="msgadd.php"> <fieldset style="border:none"> ……. <label for="name">Name: </label> <input type="text" name="name" id="name" onclick="enable()" style="width:240" /><span style="color:red"> * </span><br /> <label for="email">Email: </label> <input type="text" name="email" id="email" style="width:240"/><span style="color:red"> * </span><br /> <label for="phone">Telephone No: </label> <input type="text" name="phone" id="phone" style="width:140" /><br /> <label for="sales">Sales/Returns<br />Order No: </label> <input type="text" name="sales" id="sales" style="width:100" /><br /> ……… </fieldset> </form> </body> Next, the labels and input fields of type="text“. Note the onclick event handler called enable() in the name field – more on this later
- 6. The XHTML Markup #3 <body> <form id="emessage" method="post" action="msgadd.php"> <fieldset style="border:none"> ……. <label for="enq">Nature of<br />Enquiry: </label> <select name="enq" id="enq" style="width:240" /> <option value="0">Please Select</option> <option value="Defective Goods">Defective Goods</option> <option value="Missing Items">Missing Items</option> <option value="Non-Delivery">Non-Delivery</option> </select><span style="color:red"> * </span><br /><br /> ……… </fieldset> </form> </body> Next, the label and drop down selectlistbox
- 7. The XHTML Markup #4 <body> <form id="emessage" method="post" action="msgadd.php"> <fieldset style="border:none"> ……. <label for="message">Message: </label> <textarea rows="20" cols="60" name="message" id="message"></textarea><span style="color:red"> * </span><br /> <br /> <input type="submit" name="submit" id="submit" value="Send" disabled="disabled" onclick="return checkmessages()" /> <input type="reset" name="reset" id="reset" value="Reset" /> ……… </fieldset> </form> </body> Last, the textareaand submit and reset buttons. Note that the submit button is initially disabled. Note also it’s onclick event handler – we use this to check that the form fields are filled in as required
- 8. The Required Fields There are four required fields on the form marked with a red asterix (*) When the user clicks the submit button we need to check that they have all been filled in We do this using a javascript function called checkmessages() This is invoked when the user clicks the submit button Our javascript code goes in the <head> section of the document and must be enclosed in <script> .. </script> tags When the user clicks in the name field the submit button will be enabled.
- 9. The enable() Function function enable() { document.getElementById("emessage").submit.disabled=false; } This is the code that enables the submit button once the user clicks in the name field. Note the use of the document.getElementById() function – this is our way of accessing the form elements.
- 10. The checkmessages() Function function checkmessages() { vartheMessage = "Invalid Message - Please complete the following: ------------------------------------------------------------------------"; varnoErrors = true; if (document.getElementById("emessage").name.value=="") { theMessage = theMessage + " --> Name"; noErrors = false; } // If no errors, submit the form if (noErrors) { return true; } else { // errors were found, show alert message alert(theMessage); document.getElementById("emessage").submit.disabled=true; return false; } } // end of function checkmessages() This is the code that checks the name field. To check the remaining fields you only need copy and paste this and edit the name of the field being checked. For the select field however you will need to check if the value is "0"
- 11. Styling the Form To pretty up the form we use a style sheet: <style> label{ float: left; width: 180px; font-weight: bold; } textarea,select,input{ margin-bottom: 5px; } #submit{ margin-left: 200px; margin-top: 5px; width: 100px; } br{ clear: left; } </style>
- 12. Warning the User If a required field is not filled in we output a warning message to this effect on the screen Let’s assume the name field isn’t filled in.
- 13. Confirming Form Submission Once the form has been successfully submitted we need to inform the user of this This can be done with a simple php script (see next slide).
- 14. Success!