Use HTML5 and/or jQuery to vaildate form inputs in the browser. Email inputs are one of the most frequent sources of mistakes, so inputting email is what the examples follow. However, similar techniques can be used for other inputs such as urls and numbers.
HTML5 introduces a whole range of additional input types, one of which is an email input element. Browser support is random, but the good part is that if a browser does not support a new input type it will fall back to treating the input as text. Developers can use email and other HTML5 input types without having to be concerned about fallback for browsers that do not support it.
For a list of browser support, see http://www.w3schools.com/html5/html5_form_input_types.asp (though at the time of writing this was out of date)
Within Concrete5 and add-ons, forms elements are typically coded either directly in html, or using the Concrete5 forms helper (or sometimes even a mixture of the two).
<input type="text" name="user_email_address">
<!-- OR using the form helper -->
<?php
$form = Loader::helper('form');
echo $form->text('user_email_address');
?>
Create HTML5 form elements from php
The cleanest validation solution for HTML5 browsers is to change these to email input types by reprogramming the relevant php to give an email input. The first of the methods below is straight forward enough, while the second requires a recent version of Concrete5 with the updated form helper. At the time of writing this How-To, the documentation for the form helper http://www.concrete5.org/documentation/developers/forms/standard-widgets does not include documentation for HTML5 form elements. The actual methods are essentially the same as for the text input element, so accept the same parameters.
<input type="email" name="user_email_address">
<!-- OR by using the form helper -->
<?php
$form = Loader::helper('form');
echo $form->email('user_email_address');
?>
Modify form elements to HTML5 using jQuery
If you are using C5 version 5.4.1.1 or earlier, or you do not want to (or are unable to) directly modify the actual form, you can achieve the same use of HTML5 form elements by adding a little a bit of jQuery to the page, either directly on the page or perhaps in an HTML block. Here is a quick way of modifying all text elements that have 'email' somewhere in their name into HTML5 compatible email elements.
<script type="text/javascript">
$(document).ready(function() {
$('input[type="text"][name*="email"]').add('input[type="text"][name*="Email"]').each(function(){
// you cant change the type of an input element, so get the html as text, hack it, then write it back.
var input_html = $('<div>').append( $(this).clone() ).html();
var better_html = input_html.replace(/type="text"/i,'type="email"');
$(this).replaceWith(better_html);
});
});
</script>
The jQuery selector looks for inputs of type text with a name containing 'email' or 'Email'. Unfortunately jQuery selectors are case sensitive, so the selector has to look for both. There are many other solutions possible using extensions or filters, but this solution is simple and easy to understand. It is of course also dependant on an input requiring an email address having 'email' somewhere in its name.
Unfortunately, you cannot simply change the input type attribute, so the next bit of the JavaScript plays a little trick. It clones the existing input and places it inside a dummy div element so it can then extract the HTML of the element as text.
Then a regular expression is used to replace 'type="text"' with 'type="email"'. By using a standard JavaScript regular expression this part can be case insensitive.
Finally, the original input element is replaced with the modified HTML.
On browsers that support the HTML5 email element, the browser will now validate the email element before the form is submitted.
Validating with jQuery without HTML5
If you want this sort of form enhancement without depending on HTML5 compatible browsers, there are jQuery plugins that perform much more comprehensive form validation, such as jquery.validate.js. See http://docs.jquery.com/Plugins/Validation. (Note, this is not the same vaildate.js as that used by the TinyMCE editor at /concrete/js/tiny_mce/utils/validate.js)
To use this jQuery validate plugin, it has to first be copied to your Concrete5 server and then added to your page using addHeaderItem(). The vaildation behaviour is attached to a form and works by looking for classes associated with input elements, so rather than replacing text elements with 'email' in their name, the jQuery below adds the classes 'require' and 'email' to the elements. The selector $('form') is then used to attach the validate() behaviour to the form. If there is more than one form on the page, this selector may need to be more specific.
<script type="text/javascript">
$(document).ready(function() {
$('input[type="text"][name*="email"]').add('input[type="text"][name*="Email"]').each(function(){
$(this).addClass('required email');
});
$("form").validate();
});
</script>
Similar techniques, recoding the form in php or modifying the form with jQuery, can be used to validate other form elements such as urls and phone numbers.