Microsoft Official Course
Module 4
Creating Forms to Collect and
Validate User Input
Module Overview
• Creating HTML5 Forms
• Validating User Input by Using HTML5 Attributes
• Validating User Input by Using JavaScript
Lesson 1: Creating HTML5 Forms
• Declaring a Form in HTML5
• HTML5 Input Types and Elements
• HTML5 Input Attributes
Declaring a Form in HTML5
• Use an HTML5 form to gather user input:
<form name="userLogin" method="post" action="[Link]">
<fieldset>
<legend>Enter your log in details:</legend>
<div id=”usernameField” class="field">
<input id="uname" name="username" type="text"
placeholder="First and Last Name" />
<label for="uname">User's Name:</label>
</div>
<div id="passwordField" class="field">
<input id="pwd" name="password" type="password"
placeholder="Password" />
<label for="pwd">User's Password:</label>
</div>
</fieldset>
<input type="submit" value="Send" />
</form>
HTML5 Input Types and Elements
• HTML5 defines a wide range of new input types
and elements, but not all are widely implemented
<select id="carManufacturer" name="carManufacturer">
<optgroup label="European">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="American">
<option value="chrysler">
Chrysler</option>
<option value="ford">
Ford</option>
</optgroup>
</select>
HTML5 Input Attributes
• Input attributes modify the behavior of input
types and forms to provide better feedback and
usability:
• autofocus
• autocomplete
• required
• pattern
• placeholder
• many other input type-specific attributes
Lesson 2: Validating User Input by Using HTML5
Attributes
• Principles of Validation
• Ensuring that Fields are Not Empty
• Validating Numeric Input
• Validating Text Input
• Styling Fields to Provide Feedback
Principles of Validation
• User input can vary in accuracy, quality, and intent
• Client-side validation improves the user
experience
• Server-side validation is still necessary
Ensuring that Fields are Not Empty
• Use the required attribute to indicate mandatory
fields
• The browser checks that they are filled in before
submitting the form
<input id="contactNo" name="contactNo" type="tel"
placeholder="Enter your mobile number" required="required" />
Validating Numeric Input
• Use the min and maxattributes to specify the
upper and lower limit for numeric data
<input id="percentage" type="number" min="0" max="100" />
Validating Text Input
• Use the pattern attribute to validate text-based
input by using a regular expression
<input id="orderRef" name="orderReference" type="text"
pattern="[0-9]{2}[A-Z]{3}" title="2 digits and 3 uppercase letters" />
Styling Fields to Provide Feedback
Use CSS to style input fields
Use the valid and invalid pseudo-classes to detect fields that
have passed or failed validation
input {
border: solid 1px;
}
input:invalid {
border-color: #f00;
}
input:valid {
border-color: #0f0;
}
Lesson 3: Validating User Input by Using JavaScript
• Handling Input Events
• Validating Input
• Ensuring that Fields are Not Empty
• Providing Feedback to the User
• Demonstration: Creating a Form and Validating
User Input
Handling Input Events
• Catch the submit event to validate an entire form
• Return true if the data is valid, false otherwise
• The form is only submitted if the submit event handler
returns true
• Catch the input event to validate individual fields
on a character-by-character basis
• If the data is not valid, display an error message by using
the setCustomValidity function
• If the data is valid, reset the error message to an empty
string
Validating Input
• Use JavaScript code to emulate unsupported
HTML5 input types and attributes in a browser:
<form id="scoreForm" … onsubmit="return validateForm();" >
<div id="scoreField" class="field" >
<input id="score" name="score" type="number" />
</div>
</form>
function isAnInteger( text ){
var intTestRegex = /^\s*(\+|-)?\d+\s*$/;
return String(text).search(intTestRegex) != -1;
}
function validateForm()
{
if( ! isAnInteger([Link]('score').value))
return false; /* No, it’s not a number! Form validation fails */
return true;
}
Ensuring that Fields are Not Empty
Use JavaScript code to ensure that a required field does not contain
only whitespace:
<form id="scoreForm" … onsubmit="return validateForm();" >
<div id="penaltiesField" class="field" >
<input id="penalties" name="penalties" type="text" />
</div>
</form>
function isSignificant( text ){
var notWhitespaceTestRegex = /[^\s]{1,}/;
return String(text).search(notWhitespaceTestRegex) != -1;
}
function validateForm() {
if( ! isSignificant([Link](‘penalties’).value))
return false; /* No! Form validation fails */
return true;
}
Providing Feedback to the User
• Provide visual feedback to the user by defining
styles and dynamically setting the class of an
element:
.validatedFine {
border-color: #0f0;
}
.validationError {
border-color: #f00;
} function validateForm() {
var textbox = [Link]("penalties");
if( ! isSignificant([Link])) {
[Link] = "validationError";
return false; /* No! Form validation fails */
}
[Link] = "validatedFine";
return true;
}
Demonstration: Creating a Form and Validating
User Input
In this demonstration, you will learn about the tasks
that you will perform in the lab for this module.
Lab: Creating a Form and Validating User Input
• Exercise 1: Creating a Form and Validating User
Input by Using HTML5 Attributes
• Exercise 2: Validating User Input by Using
JavaScript
Logon Information
• Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1
• User Name: Student
• Password: Pa$$w0rd
Estimated Time: 60 minutes
Lab Scenario
Delegates who want to attend ContosoConf will be
required to register and provide their details. You have
been asked to add a page to the ContosoConf website that
implements an attendee registration form.
The server-side code already exists to process the attendee
data. However, the registration page performs very
minimal validation that is not user friendly. You have
decided to add client-side validation to the form to
improve the accuracy of the registration data entered by
attendees and to provide a better user experience.
Module Review and Takeaways
• Review Question(s)
