Form validation examples
You're currently viewing XMPL V3
Attention: XMPL V5 beta is now available!
This page contains a range of code samples that demonstrate different form field validation techniques available with XMPL.
Simply add the "required" parameter to the input tag to make a text input field mandatory:
<p>First name: <input name="firstname"
type="text"
xmp-write-ador="xmp.r['FirstName']"
required></p>You can also provide better feedback to your users by adding error messages with ng-show. For example:
<p>First name: <input name="firstname"
type="text"
xmp-write-ador="xmp.r['FirstName']"
required></p>
<div class="error" ng-show="form.firstname.$invalid">
<span ng-show="form.firstname.$error.required">The first name is mandatory</span>
</div>You can test and adjust the above sample code in a personalized or anonymous page:
Regular expressions provide a powerful pattern matching capability that allows you to validate almost any kind of data entry. In this example the pattern needed for zipcode is 2 letters followed by either 4 or 5 digits:
<p>Zip code: <input name="zipcode"
type="text"
xmp-write-ador="xmp.r['ZipCode']"
ng-pattern="/^[a-zA-Z]{2}[0-9]{4,5}$/"></p>You can also combine the ng-pattern and the required parameter to make the field mandatory as well as conform to a particular pattern:
<p>Zip code: <input name="zipcode"
type="text"
xmp-write-ador="xmp.r['ZipCode']"
ng-pattern="/^[a-zA-Z]{2}[0-9]{4,5}$/"
required></p>You can test and adjust the above sample code in a personalized or anonymous page:
For more information on Regular Expressions, refer to [w3schools regular expressions reference] (http://www.w3schools.com/jsref/jsref_obj_regexp.asp)
When an input tag with type="email" also includes the required parameter, validation checks for basic email address format. Note that while this parameter is quick and easy to use, it is not 100% accurate and can permit some invalid email addresses. (A better method might be a Regular Expression pattern as described above.)
<p>Email: <input name="email"
type="email"
xmp-write-ador="xmp.r['Email']"
required></p>
<div class="error" ng-show="form.email.$invalid">
<span ng-show="form.email.$error.email">This is not a valid email address. Please fix</span>
<span ng-show="form.email.$error.required">The email field is mandatory</span>
</div>You can test and adjust the above sample code in a personalized or anonymous page:
The above code samples also demonstrate how you can show different error messages to the user based on why the value fails validation - that there is no value when one is mandatory; or the value provided is not a valid email address.
You can make a select tag mandatory, by simply adding the required parameter to the tag:
<p>Share your life story (mandatory):<br/>
<textarea name="story"
rows="4" cols="50"
xmp-write-ador="xmp.r['LifeStory']"
required></textarea></p>You can set the maximum length of the text entered by the user if you set the ng-maxlength parameter and set the number of characters permitted:
<p>Share your life story with us (in 60 characters or less):<br/>
<textarea name="story"
rows="4" cols="50"
xmp-write-ador="xmp.r['LifeStory']"
ng-maxlength="60"></textarea></p>
<div class="error" ng-show="form.story.$error.maxlength">
The text is too long. Please keep yourself within the allowed length
</div>You can test and adjust the above sample code in a personalized or anonymous page:
You can make a select tag mandatory, by simply adding the required parameter to the tag:
<p>Planet of choice:
<select name="Planets" xmp-write-ador="xmp.r.Planet" ng-model="data.singleSelect" required>
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="Jupiter">The planet Jupiter</option>
<option value="Moon">The moon Moon</option>
</select></p>
<div class="error" xmp-show="!xmp.r.Planet">
<span ng-show="form.Planets.$error.required">Please select one of the planets</span>
</div>You can test and adjust the above sample code in a personalized or anonymous page:
For a radio button group, the "name" parameter of all radio buttons should be identical. To validate that one is selected, set the "ng-required" parameter to the same ADOR or content object name preceded by the "!" exclamation mark:
<p>Favorite color:<br/>
<label><input name="color"
type="radio"
value="Green"
xmp-write-ador="xmp.r.FavColor"
ng-required="!xmp.r.FavColor">Green, like the fields in the countryside</label><br />
<label><input name="color"
type="radio"
value="Red"
xmp-write-ador="xmp.r.FavColor"
ng-required="!xmp.r.FavColor">Red, as the eye of the ruby</label><br />
<label><input name="color"
type="radio"
value="Aubergine"
xmp-write-ador="xmp.r.FavColor"
ng-required="!xmp.r.FavColor">Aubergine, which is basically purple</label></p>
<div class="error" xmp-show="form.color.$invalid">
<span>Please select one of the colors</span>
</div>You can test and adjust the above sample code in a personalized or anonymous page:
In some cases you may have one checkbox that the customer must select in order to agree or continue. This example demonstrates this. Note that some additional JavaScript is required:
JavaScript code:
$(window).load(function() {
var myScope = angular.element(document.querySelector("body")).scope();
myScope.NotAgree = true;
myScope.myFunction = function() {
if (myScope.xmp.r['Agree']) {
myScope.NotAgree = false;
} else {
myScope.NotAgree = true;
}
}
});HTML Markup:
<!-- one checkbox selection - mandatory -->
<!-- Note: Requires the custom javascript to work -->
<p>Please agree to our terms and conditions in order to continue:</p>
<label><input name="UserAgree"
id="Agree"
type="checkbox"
ng-change="myFunction()"
ng-required="NotAgree"
xmp-write-ador="xmp.r['Agree']"
ng-checked="xmp.r.Agree == 'True'"/>I agree to the terms and conditions</label><br />
<div class="error" ng-show="NotAgree">
Please select at least one option
</div>
<input type="submit" ng-disabled="form.$invalid || NotAgree" value="save" xmp-tracking-action="form submitted">You can test and adjust the above sample code in a personalized or anonymous page:
To make it mandatory for customers to check at least one option in a checkbox group, some additional JavaScript is required. Note that the name of each checkbox tag should be the same, but the id should be different.
Javascript code:
$(window).load(function() {
var myScope = angular.element(document.querySelector("body")).scope();
myScope.AnimalNotValid = true;
myScope.myFunction = function() {
if (myScope.xmp.r['OptLion'] || myScope.xmp.r['OptDog'] ||
myScope.xmp.r['OptCow'] || myScope.xmp.r['OptZebra']) {
myScope.AnimalNotValid = false;
} else {
myScope.AnimalNotValid = true;
}
}
});HTML markup:
<p>Choose any or all of the following options:</p>
<label><input name="AnimalsGroup"
id="OptLion"
type="checkbox"
ng-change="myFunction()"
ng-required="AnimalNotValid"
xmp-write-ador="xmp.r['OptLion']"
ng-checked="xmp.r.OptLion == 'True'"/>Lion</label><br />
<label><input name="AnimalsGroup"
id="OptDog"
type="checkbox"
ng-change="myFunction()"
ng-required="AnimalNotValid"
xmp-write-ador="xmp.r['OptDog']"
ng-checked="xmp.r.OptDog == 'True'"/>Dog</label><br />
<label><input name="AnimalsGroup"
id="OptCow"
type="checkbox"
ng-change="myFunction()"
ng-required="AnimalNotValid"
xmp-write-ador="xmp.r['OptCow']"
ng-checked="xmp.r.OptCow == 'True'"/>Cow</label><br />
<label><input name="AnimalsGroup"
id="OptZebra"
type="checkbox"
ng-change="myFunction()"
ng-required="AnimalNotValid"
xmp-write-ador="xmp.r['OptZebra']"
ng-checked="xmp.r.OptZebra == 'True'"/>Zebra</label><br />
<div class="error" ng-show="AnimalNotValid">
Please select at least one option
</div>
<input type="submit" ng-disabled="form.$invalid || AnimalNotValid" value="save" xmp-tracking-action="form submitted">You can test and adjust the above sample code in a personalized or anonymous page:
For more information, you can refer to:
[Angular JS Form documentation] (https://code.angularjs.org/1.3.0/docs/guide/forms)
New!! Take a look at XMPL V5 Beta