Form Validation


Published on

Published in: Technology, Sports
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Form Validation

  1. 1. Form Validation<br />A Simple Javascript Exercise<br />
  2. 2. Sending eMessages<br />A alternative to email<br />Message is stored in company database<br />But how do we check that the requires fields are filled in?<br />Do this at the client side using javascript<br />
  3. 3. The Form<br />Six fields – the first four are of type=&quot;text&quot;, the fifth is a drop down selectlistbox, and the last is a textarea. Note that the submit button is disabled.<br />
  4. 4. The XHTML Markup #1<br />&lt;body&gt;<br /> &lt;imgsrc=&quot;bdlogo.gif“ /&gt;<br /> &lt;form id=&quot;emessage&quot; method=&quot;post&quot; action=&quot;msgadd.php&quot;&gt;<br /> &lt;fieldset style=&quot;border:none&quot;&gt;<br />……….<br /> &lt;/fieldset&gt;<br />&lt;/body&gt;<br />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.<br />
  5. 5. The XHTML Markup #2<br />&lt;body&gt;<br />&lt;form id=&quot;emessage&quot; method=&quot;post&quot; action=&quot;msgadd.php&quot;&gt;<br />&lt;fieldset style=&quot;border:none&quot;&gt;<br /> …….<br />&lt;label for=&quot;name&quot;&gt;Name: &lt;/label&gt;<br /> &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; onclick=&quot;enable()&quot; style=&quot;width:240&quot; /&gt;&lt;span style=&quot;color:red&quot;&gt; * &lt;/span&gt;&lt;br /&gt;<br /> &lt;label for=&quot;email&quot;&gt;Email: &lt;/label&gt;<br /> &lt;input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; style=&quot;width:240&quot;/&gt;&lt;span style=&quot;color:red&quot;&gt; * &lt;/span&gt;&lt;br /&gt;<br /> &lt;label for=&quot;phone&quot;&gt;Telephone No: &lt;/label&gt;<br /> &lt;input type=&quot;text&quot; name=&quot;phone&quot; id=&quot;phone&quot; style=&quot;width:140&quot; /&gt;&lt;br /&gt;<br /> &lt;label for=&quot;sales&quot;&gt;Sales/Returns&lt;br /&gt;Order No: &lt;/label&gt;<br /> &lt;input type=&quot;text&quot; name=&quot;sales&quot; id=&quot;sales&quot; style=&quot;width:100&quot; /&gt;&lt;br /&gt;<br />………<br /> &lt;/fieldset&gt;<br />&lt;/form&gt;<br />&lt;/body&gt;<br />Next, the labels and input fields of type=&quot;text“. Note the onclick event handler called enable() in the name field – more on this later<br />
  6. 6. The XHTML Markup #3<br />&lt;body&gt;<br />&lt;form id=&quot;emessage&quot; method=&quot;post&quot; action=&quot;msgadd.php&quot;&gt;<br />&lt;fieldset style=&quot;border:none&quot;&gt;<br /> …….<br />&lt;label for=&quot;enq&quot;&gt;Nature of&lt;br /&gt;Enquiry: &lt;/label&gt;<br />&lt;select name=&quot;enq&quot; id=&quot;enq&quot; style=&quot;width:240&quot; /&gt;<br /> &lt;option value=&quot;0&quot;&gt;Please Select&lt;/option&gt;<br /> &lt;option value=&quot;Defective Goods&quot;&gt;Defective Goods&lt;/option&gt;<br /> &lt;option value=&quot;Missing Items&quot;&gt;Missing Items&lt;/option&gt;<br /> &lt;option value=&quot;Non-Delivery&quot;&gt;Non-Delivery&lt;/option&gt;<br /> &lt;/select&gt;&lt;span style=&quot;color:red&quot;&gt; * &lt;/span&gt;&lt;br /&gt;&lt;br /&gt; <br />………<br /> &lt;/fieldset&gt;<br />&lt;/form&gt;<br />&lt;/body&gt;<br />Next, the label and drop down selectlistbox<br />
  7. 7. The XHTML Markup #4<br />&lt;body&gt;<br />&lt;form id=&quot;emessage&quot; method=&quot;post&quot; action=&quot;msgadd.php&quot;&gt;<br />&lt;fieldset style=&quot;border:none&quot;&gt;<br /> …….<br /> &lt;label for=&quot;message&quot;&gt;Message: &lt;/label&gt;<br /> &lt;textarea rows=&quot;20&quot; cols=&quot;60&quot; name=&quot;message&quot; id=&quot;message&quot;&gt;&lt;/textarea&gt;&lt;span style=&quot;color:red&quot;&gt; * &lt;/span&gt;&lt;br /&gt;<br /> &lt;br /&gt;<br /> &lt;input type=&quot;submit&quot; name=&quot;submit&quot; id=&quot;submit&quot; value=&quot;Send&quot; disabled=&quot;disabled&quot; onclick=&quot;return checkmessages()&quot; /&gt;<br /> &lt;input type=&quot;reset&quot; name=&quot;reset&quot; id=&quot;reset&quot; value=&quot;Reset&quot; /&gt;<br />………<br /> &lt;/fieldset&gt;<br />&lt;/form&gt;<br />&lt;/body&gt;<br />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<br />
  8. 8. The Required Fields<br />There are four required fields on the form marked with a red asterix (*)<br />When the user clicks the submit button we need to check that they have all been filled in<br />We do this using a javascript function called checkmessages()<br />This is invoked when the user clicks the submit button<br />Our javascript code goes in the &lt;head&gt; section of the document and must be enclosed in &lt;script&gt; .. &lt;/script&gt; tags<br />When the user clicks in the name field the submit button will be enabled.<br />
  9. 9. The enable() Function<br />function enable() {<br />document.getElementById(&quot;emessage&quot;).submit.disabled=false;<br />}<br />This is the code that enables the submit button once the user clicks in the name field.<br />Note the use of the document.getElementById() function – this is our way of accessing the form elements.<br />
  10. 10. The checkmessages() Function<br />function checkmessages() {<br />vartheMessage = &quot;Invalid Message - Please complete the following: ------------------------------------------------------------------------ &quot;;<br />varnoErrors = true;<br /> if (document.getElementById(&quot;emessage&quot;).name.value==&quot;&quot;) {<br />theMessage = theMessage + &quot; --&gt; Name&quot;;<br />noErrors = false;<br /> }<br /> // If no errors, submit the form<br /> if (noErrors) {<br /> return true;<br /> } else {<br /> // errors were found, show alert message<br /> alert(theMessage);<br />document.getElementById(&quot;emessage&quot;).submit.disabled=true;<br /> return false;<br /> }<br /> } // end of function checkmessages()<br />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.<br />For the select field however you will need to check if the value is &quot;0&quot;<br />
  11. 11. Styling the Form<br />To pretty up the form we use a style sheet:<br />&lt;style&gt;<br /> label{<br /> float: left;<br /> width: 180px;<br /> font-weight: bold;<br /> }<br />textarea,select,input{<br /> margin-bottom: 5px;<br /> }<br /> #submit{<br /> margin-left: 200px;<br /> margin-top: 5px;<br /> width: 100px;<br />}<br />br{<br /> clear: left;<br />}<br />&lt;/style&gt;<br />
  12. 12. Warning the User<br />If a required field is not filled in we output a warning message to this effect on the screen<br />Let’s assume the name field isn’t filled in.<br />
  13. 13. Confirming Form Submission<br />Once the form has been successfully submitted we need to inform the user of this<br />This can be done with a simple php script (see next slide).<br />
  14. 14. Success!<br />