Making a form field mandatory

It’s common for a form to contain at least one field that the user must fill in. For example, if your form is for a login, then you certainly need both the username and password fields to be mandatory, meaning you want to set up the form so that the submission won’t go through unless both fields are filled in.

Here are a few things you can do to encourage users to fill in mandatory fields:

• Make it clear which fields are mandatory. Many sites place an asterisk before or after a field and include a note such as Fields marked with * are required at the top of the form.
• For a radio button group, always set up your form so that one of the <input> tags includes the checked attribute. This ensures that one option will always be selected.
• For a selection list, make sure that one of the <option> tags includes the selected attribute.

Outside of these techniques, you can make any field mandatory by adding the required attribute to the form field tag. Here's an example:

<form>

<div>

<label for="fave-beatle">Favorite Beatle:</label>

<input id="fave-beatle" type="text" required>

<button type="submit">Submit</button>

</div>

</form>

The <input> tag has the required attribute. If you leave this field blank and try to submit the form, the browser prevents the submission and displays a message telling you to fill in the field. This message is slightly different, depending on the web browser. Figure 3-1 shows the message that Chrome displays.

Restricting the length of a text field

Another useful built-in HTML5 validation technique is setting restrictions on the length of the value entered into a text field. For example, you might want a password value to have a minimum length, and you might want a username to have a maximum length. Easier done than said:

• To add a minimum length restriction, set the minlength attribute to the least number of characters the user must enter.
• To add a maximum length restriction, set the maxlength attribute to the most number of characters the user can enter.

Take a look at an example:

<form>

<div>

<label for="acct-handle">Account handle (6-12 chars):</label>

<input id="acct-handle"

type="text"

placeholder="Enter 6-12 characters"

minlength="6"

maxlength="12">

<button type="submit">Submit</button>

</div>

</form>

The <input> tag asks for a value no less than 6 and no more than 12 characters long. If the user enters a value shorter or longer and tries to submit the form, the browser prevents the submission and displays a message asking for more or fewer characters. Figure 3-2 shows the version of the message that Firefox displays.

Setting maximum and minimum values on a numeric field

HTML5 can also validate a numeric field based on a specified minimum or maximum value for the field. Here are the attributes to use:

• min: To add a minimum value restriction, set the min attribute to the smallest allowable value the user can enter.
• max: To add a maximum value restriction, set the max attribute to the largest allowable value the user can enter.

Here's an example:

<form>

<div>

<label for="loan-term">Loan term (years):</label>

<input id="loan-term"

type="number"

placeholder="3-25"

min="3"

max="25">

<button type="submit">Submit</button>

</div>

</form>

The number <input> tag asks for a value between 3 and 25. If the user enters a value outside of this range and tries to submit the form, the browser prevents the submission and displays a message to reenter a value that's either less than or equal to the maximum (as shown in Figure 3-3) or greater than or equal to the minimum.

Validating email fields

Generic field validation attributes such as required, minlength, and max are very useful, but some form fields need a more targeted validation technique. In a field that accepts an email address, for example, any entered value should look something like username@domain. If that sounds like a daunting challenge, you're right, it is. Fortunately, that challenge has already been taken up by some of the best coders on the planet. The result? Built-in HTML5 validation for email addresses. And when I say “built-in,” I mean built-in, because once you specify type="email" in the <input> tag, modern web browsers will automatically validate the field input to make sure it looks like an email address when the form is submitted, as shown in Figure 3-4.

Making field values conform to a pattern

One of the most powerful and flexible HTML5 validation techniques is pattern matching, where you specify a pattern of letters, numbers, and other symbols that the field input must match. You add pattern matching validation to a text, email, url, tel, search, or password field by adding the pattern attribute:

pattern="regular_expression"

• regular_expression: A type of expression called a regular expression that uses special symbols to define the pattern you want to apply to the field

For example, suppose you want to set up a pattern for a ten-digit North American telephone number that includes dashes, such as 555-123-4567 or 888-987-6543. In a regular expression, the symbol d represents any digit from 0 to 9, so your regular expression would look like this:

ddd-ddd-dddd

Here's the regular expression added to a telephone number field:

<input id="user-phone"

type="tel"

pattern="ddd-ddd-dddd"

placeholder="e.g., 123-456-7890"

title="Enter a 10-digit number in the format 123-456-7890">

It’s a good idea to add the title attribute and use it to describe the pattern you want to user to enter. Also, you can find all kinds of useful, ready-made patterns at the HTML5 Pattern site: http://html5pattern.com.

Table 3-1 summarizes the most useful regular expression symbols to use with the pattern attribute. See “Regular Expressions Reference,” later in this chapter, for a more detailed look at this powerful tool.

From this table, you can see that an alternative way to write the 10-digit telephone regular expression would be the following:

[0-9]{3}-[0-9]{3}-[0-9]{4}

Styling invalid fields

One useful thing you can do as a web developer is make it obvious for the user when a form field contains invalid data. Sure, the browser will display its little tooltip to alert the user when she submits the form, but that tooltip only stays onscreen for a few seconds. It would be better to style the invalid field in some way so the user always knows it needs fixing.

One straightforward way to do that is to take advantage of the CSS :invalid pseudo-selector, which enables you to apply a CSS rule to any invalid field. For example, here's a rule that adds a red highlight around any <input> tag that is invalid:

input:invalid {

border-color: rgba(255, 0, 0, .5);

box-shadow: 0 0 10px 2px rgba(255, 0, 0, .8);

}

The problem, however, is that the web browser checks for invalid fields as soon as it loads the page. So, for example, if you have fields with the required attribute that are initially empty when the page loads, the browser will flag those as invalid and apply the invalid styling. Your users will be saying, “Gimme a break, I just got here!”

One way to work around this problem is to display an initial message (such as required) beside each required field, then replace that message with something positive (such as a check mark) when the field is filled in.

Here's some code that does that:

CSS:

input:invalid+span::after {

content:'(required)';

color: red;

}

input:valid+span::after {

content:'2713';

color: green;

}

HTML:

<form>

<div>

<label for="user-name">Name:</label>

<input id="user-name"

type="text"

placeholder="Optional"

required>

<span></span>

</div>

<div>

<label for="user-email">Email:</label>

<input id="user-email"

type="email"

placeholder="e.g., [email protected]"

required>

<span></span>

</div>

<button type="submit">Submit</button>

</form>

Notice in the HTML that both fields have the required attribute and both fields also have an empty span element right after them. Those span elements are where you'll put your messages, and that’s what the CSS code is doing:

• The first CSS rule looks for any invalid input field, then uses the adjacent sibling select (+) to select the span that comes immediately after the field. The ::after pseudo-element adds the content (required) to the span and colors it red.
• The second CSS rule is very similar, except that it looks for any valid input field, then adds a green check mark (given by Unicode character 2713) to the span.

Figure 3-5 shows these rules in action, where the Name field is valid and the Email field is invalid.

Another approach is to use jQuery to listen for the invalid event firing on any input element. The invalid event fires when the user tries to submit the form and one or more fields contain invalid data. In your event handler, you could then apply a predefined class to the invalid field. Here's some code that does just that:

CSS:

.error {

border-color: rgba(255, 0, 0, .5);

box-shadow: 0 0 10px 2px rgba(255, 0, 0, .8);

}

input:valid {

border-color: lightgray;

box-shadow: none;

}

HTML:

<form>

<div>

<label for="user-name">Name:</label>

<input id="user-name"

type="text"

placeholder="Your name"

required>

</div>

<div>

<label for="user-email">Email:</label>

<input id="user-email"

type="email"

placeholder="e.g., [email protected]"

required>

</div>

<button type="submit">Submit</button>

</form>

jQuery:

$("input").on("invalid", function() {

$(this).addClass('error');

});

The HTML is the same as in the previous example, minus the extra <span> tags. The CSS code defines a rule for the error class that uses border-color and box-shadow to add a red-tinged highlight to an element. The input:valid selector removes the border and box shadow when the field becomes valid. The jQuery code listens for the invalid event on any input element. When it fires, the event handler adds the error class to the element.

Checking for required fields

If one or more fields in your form are mandatory, you can check those fields on the server by using PHP’s empty() function:

empty(expression)

• expression: The literal, variable, expression, or function result that you want to test

The empty() function returns FALSE if the expression exists and has a non-empty, non-zero value; it returns TRUE, otherwise.

I'll go through a complete example that shows one way to handle validation errors on the server. First, here’s some HTML:

<form>

<div>

<label for="user-name">Name</label>

<input id="user-name"

type="text"

name="user-name">

</div>

<div>

<label for="user-email">Email</label>

<input id="user-email"

type="email"

name="user-email">

</div>

<button type="submit">Submit</button>

</form>

<article class="output"></article>

The form has two text fields, and there’s also an <article> tag that you’ll use a bit later to output the server results.

On the server, I created a PHP file named validate-required-fields.php:

<?php

// Store the default status

$server_results['status'] = 'success';

// Check the user-name field

if(isset($_GET['user-name'])) {

$user_name = $_GET['user-name'];

// Is it empty?

if(empty($user_name)) {

// If so, update the status and add an error message for the field

$server_results['status'] = 'error';

$server_results['user-name'] = 'Missing user name';

}

}

// Check the user-email field

if(isset($_GET['user-email'])) {

$user_email = $_GET['user-email'];

// Is it empty?

if(empty($user_email)) {

// If so, update the status and add an error message for the field

$server_results['status'] = 'error';

$server_results['user-email'] = 'Missing email address';

}

}

// If status is still "success", add the success message

if($server_results['status'] === 'success') {

$output = "Success! Thanks for submitting the form, $user_name.";

$server_results['output'] = $output;

}

// Create and then output the JSON data

$JSON_data = json_encode($server_results, JSON_HEX_APOS | JSON_HEX_QUOT);

echo $JSON_data;

?>

This script uses the $server_results associative array to store the data that gets sent back to the browser. At first the array's status key is set to success. Then the script checks the user-name field from the $_GET array: If the field is empty, the array's status key is set to error and an array item is added that sets an error message for the field. The same process is then used for the user-email field. If after those checks the array's status key is still set to success (meaning there were no validation errors), then the array is updated with a success message. Finally, the array is converted to JSON and outputted.

Back on the client, the form element's submit event handler converts and submits the form data, and then processes the result:

$('form').submit(function(e) {

// Prevent the default form submission

e.preventDefault();

// Convert the data to a query string

var formData = $(this).serialize();

// Send the data to the server

$.getJSON('php/validate-required-fields.php', formData, function(data) {

// Display the output element

$('.output').css('display', 'block');

// Check the validation status

if(data.status === 'success') {

// Output the success result

$('.output').html(data.output);

} else {

// Output the validation error(s)

$('.output').html('<section>Whoops! There were errors:</section>');

$.each(data, function(key, error) {

if(key !== 'status') {

// Get the label text

var label = $('label[for=' + key + ']').text();

$('.output').append('<section>Error in ' + label + ' field: ' + error + '</section>');

}

});

}

});

});

Note, in particular, the .getJSON() callback function checks the value of data.status: If it equals success, the script's success message is displayed. Otherwise, the .each() loop adds each error message to the output element. Figure 3-6 shows an example.

Validating text data

Besides validating that a text field exists, you might also want to perform two other validation checks on a text field:

• The field contains alphabetic characters only. To ensure the field contains only lowercase or uppercase letters, use the ctype_alpha() function:

  ctype_alpha(text)

  • text: Your form field's text data

  The ctype_alpha() function returns TRUE if the field contains only letters, FALSE otherwise.

• The field length is greater than some minimum and/or less than some maximum value. To check the length of the field, use the strlen() function:

  strlen(text)

  • text: Your form field's text data

  The strlen() function returns the number of characters in the field.

Here’s some PHP code that performs these checks on a form field called user-name:

<?php

// Store the default status

$server_results['status'] = 'success';

// Check the user-name field

if(isset($_GET['user-name'])) {

$user_name = $_GET['user-name'];

// Is it empty?

if(empty($user_name)) {

// If so, update the status and add an error message for the field

$server_results['status'] = 'error';

$server_results['user-name'] = 'Missing user name';

} else {

// Does it contain non-alphabetic characters?

if(!ctype_alpha($user_name)){

// If so, update the status and add an error message for the field

$server_results['status'] = 'error';

$server_results['user-name'] = 'User name must be text';

} else {

// Does the user name contains less than 3 or more than 12 characters?

if(strlen($user_name) < 3 || strlen($user_name) > 12) {

// If so, update the status and add an error message for the field

$server_results['status'] = 'error';

$server_results['user-name'] = 'User name must be 3 to 12 characters long';

}

}

}

}

// If status is still "success", add the success message

if($server_results['status'] === 'success') {

$output = "Success! Thanks for submitting the form, $user_name.";

$server_results['output'] = $output;

}

// Create and then output the JSON data

$JSON_data = json_encode($server_results, JSON_HEX_APOS | JSON_HEX_QUOT);

echo $JSON_data;

?>

Validating a field based on the data type

If you want to ensure the value of a field is a particular data type, PHP offers a powerful function called filter_var() that can help:

filter_var(var, filter, options)

• var: The variable, expression, or function result you want to check.
• filter: An optional constant value that determines the data type you want to check. Here are some useful filters:
  • FILTER_VALIDATE_BOOLEAN: Checks for a Boolean value.
  • FILTER_VALIDATE_EMAIL: Checks for a valid email address.
  • FILTER_VALIDATE_FLOAT: Checks for a floating point value.
  • FILTER_VALIDATE_INT: Checks for an integer value.
  • FILTER_VALIDATE_URL: Checks for a valid URL.
• options: An optional array that sets one or more options for the filter. For example, FILTER_VALIDATE_INT accepts the options min_range and max_range, which set the minimum and maximum allowable integers. Here's the setup for a minimum of 0 and a maximum of 100:

  array('options' => array('min_range' => 0, 'max_range' => 100))

The filter_var() function returns the data if it’s valid according to the specified filter; if the data isn’t valid, the function returns FALSE (or NULL, if you're using FILTER_VALIDATE_BOOLEAN).

Here’s an example script that checks for integer values within an allowable range:

<?php

// Store the default status

$server_results['status'] = 'success';

// Check the user-age field

if(isset($_GET['user-age'])) {

$user_age = $_GET['user-age'];

// Is it empty?

if(empty($user_age)) {

// Add an error message for the field

$server_results['status'] = 'error';

$server_results['user-age'] = 'Missing age value';

} else {

// Is the field not an integer?

if(!filter_var($user_age, FILTER_VALIDATE_INT)){

// Add an error message for the field

$server_results['status'] = 'error';

$server_results['user-age'] = 'Age must be an integer';

} else {

// Is the age not between 14 and 114?

$options = array('options' => array('min_range' => 14, 'max_range' => 114));

if(!filter_var($user_age, FILTER_VALIDATE_INT, $options)) {

// Add an error message for the field

$server_results['status'] = 'error';

$server_results['user-age'] = 'Age must be between 14 and 114';

}

}

}

}

// If status is "success", add the success message

if($server_results['status'] === 'success') {

$output = "Success! You don't look a day over " . intval($user_age - 1) . ".";

$server_results['output'] = $output;

}

// Create and then output the JSON data

$JSON_data = json_encode($server_results, JSON_HEX_APOS | JSON_HEX_QUOT);

echo $JSON_data;

?>

The script uses filter_var($user_age, FILTER_VALIDATE_INT) twice: first without and then with the options parameter. The first instance just checks for an integer value, whereas the second checks for an integer between 14 and 114. The integer check is redundant here, but I added both so you could get a feel for how filter_var() works.

Validating against a pattern

If you want to use a regular expression to validate a field value, PHP says “No problem!” by offering you the preg_match() function. Here's the simplified syntax:

preg_match(pattern, string)

• pattern: The regular expression, which you enter as a string. Note, too, that the regular expression must be surrounded by slashes (/).
• string: The string (such as a form field value) that you want to match against the regular expression.

The preg_match() function returns TRUE if string matches pattern, and FALSE, otherwise.

For example, suppose you want to check an account number to ensure that it uses the pattern AA-12345 — that is, two uppercase letters, a hyphen, then five numbers. Assuming the value is stored in a variable named $account_number, here's a preg_match() function that will validate the variable:

preg_match(‘/[A-Z]{2}-[0-9]{5}/’, $account_number)