SlideShare a Scribd company logo

Form Validation

•Download as PPTX, PDF•
•
Graeme Smith
Graeme Smith

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.

1 of 14
Form ValidationA Simple Javascript Exercise
Sending eMessagesA alternative to emailMessage is stored in company databaseBut how do we check that the requires fields are filled in?Do this at the client side using javascript
The FormSix 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.
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.
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
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
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
The Required FieldsThere 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 inWe do this using a javascript function called checkmessages()This is invoked when the user clicks the submit buttonOur javascript code goes in the <head> section of the document and must be enclosed in <script> .. </script> tagsWhen the user clicks in the name field the submit button will be enabled.
The enable() Functionfunction 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.
The checkmessages() Functionfunction 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"
Styling the FormTo 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>
Warning the UserIf a required field is not filled in we output a warning message to this effect on the screenLet’s assume the name field isn’t filled in.
Confirming Form SubmissionOnce the form has been successfully submitted we need to inform the user of thisThis can be done with a simple php script (see next slide).
Success!

More Related Content

Form Validation

  • 1. Form ValidationA Simple Javascript Exercise
  • 2. Sending eMessagesA alternative to emailMessage is stored in company databaseBut how do we check that the requires fields are filled in?Do this at the client side using javascript
  • 3. The FormSix 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 FieldsThere 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 inWe do this using a javascript function called checkmessages()This is invoked when the user clicks the submit buttonOur javascript code goes in the <head> section of the document and must be enclosed in <script> .. </script> tagsWhen the user clicks in the name field the submit button will be enabled.
  • 9. The enable() Functionfunction 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() Functionfunction 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 FormTo 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 UserIf a required field is not filled in we output a warning message to this effect on the screenLet’s assume the name field isn’t filled in.
  • 13. Confirming Form SubmissionOnce the form has been successfully submitted we need to inform the user of thisThis can be done with a simple php script (see next slide).