Decision Making and Scopes - Hands On 5

gistfile1.md

In this hands on, you are going to update our code to provide a better user experience to your users as well as improve the form validation.

Tags Used: <cfparam>, <cfoutout>

Functions Used: len, trim

1. Locate the <cfparam> tag at the top of the /www/contact.cfm file.
2. Below the <cfparam> tag, create another one for contactname, email, and message. Leave the default attribute as empty. Your code should look similar to this:

   <cfparam name="form.contactname" default="" />
   <cfparam name="form.email" default="" />
   <cfparam name="form.message" default="" />
   

3. Locate the contactname form input on or around line 132 and add a value attribute with a value of #form.contactname#.
4. Locate the email form input on or around line 136 and add a value attribute with the value of #form.email#.
5. Locate the message textarea on or around line 140 and place the value #form.message# between the open and close tags.
6. Confirm your code looks similar to this:

   <div>
   	<label>Name <span class="font-11">(required)</span></label>
   	<input name="contactname" type="text" class="required" value="#form.contactname#"/>
   </div>
   <div>
   <label>E-mail <span class="font-11">(required)</span></label>
   <input name="email" type="text" class="required email" value="#form.email#"/>
   </div>
   <div class="textarea">
   <label>Message <span class="font-11">(required)</span></label>
   <textarea name="message" rows="6" cols="60" class="required">#form.message#</textarea>
   </div>
   

7. Locate the open <form> tag on or around line 129 and put on open <cfoutput> tag before the form tag.
8. Locate the closing </form> tag on or around line 146 and put a closing </cfoutput> tag after the form tag.
9. Reload the contact.cfm page in your browser; fill in 2 of the 3 inputs of the form and click 'submit'.
10. Notice that the form is now pre-populated with the values you submitted, but you still receive the message "You did not provide all the required information!"
11. Reload the contact.cfm page in your browser.
12. Add a space in all form fields and click submit.
13. Notice that the message does not display on the page. This is due to the fact that the form fields do have a length, even though it is just a space.
14. Locate the <cfif> statement that checks the length of form.contactname on or around line 108.
15. Wrap the form.contactname variable in a trim() function. This will remove all whitespace at the beginning and end of the variable.
16. Your code should look similar to this:

    <cfif len(trim(form.contactname)) eq 0>
    

    	</li>
    	<li>
    		Add the <span class="code">trim</span> function to the <span class="code">form.email</span> and <span class="code">form.message</span> <span class="code">&lt;cfif></span> statements.
    	</li>
    	<li>
    		Reload the <span class="code">contact.cfm</span> page in your browser and add spaces to all 3 form fields. Notice that the message is displayed.
    	</li>
    </ol>