Form with Input Validations

This page uses a Hashtag Form to demonstrate input validation.   The Hashtag Framework validates all HTML 5 input types, in additional to new types.   JavaScript is included as a fallback for browsers that don't support HTML 5.   The Form is styled using Bootstrap 3 default theme classes.  

Note:  In addition to the input validation done client-side in the web browser, the Hashtag Framework also performs the same input validations server-side when processing a submitted form.  

All of the preset values in this Form pass validation, except the Email value.   The HTML 5 spec passes test@test, but the Hashtag Framework further validates domains, and flags it as an invalid email address.  

This Form redirects back to this page, using the same Form to edit the newly created record.  

* 2 letters, followed by 4 numbers
Processed this Hashtag Markup: 
<# start form for validations <#[url.edit]#>;
	set form.class to "form-horizontal";
	when deleting call confirm('Delete Record?');
	when deleting redirect to "/forms/input-validations#form";
	when done redirect to "/forms/input-validations?edit=<# form.id #>#form";
#>

<# if "<#[url.edit]#>"!="" #>
<h4 class="alert alert-success text-center">
	Success!  This record passed all validations.
</h4>
<# end if #>

<div class="form-group">
	<label for="email" class="col-sm-4 control-label">Email</label>
	<div class="col-sm-4">
		<input type="email" <# email #> required case-insensitive-unique 
			class="form-control" id="email" value="test@test">
	</div>
</div>
<div class="form-group">
	<label for="integer" class="col-sm-4 control-label">Positive Integer Number</label>
	<div class="col-sm-4">
		<input type="integer" <# integer #> required min="0" 
			class="form-control" id="integer" value="7">
	</div>
</div>
<div class="form-group">
	<label for="number" class="col-sm-4 control-label">Decimal Number</label>
	<div class="col-sm-4">
		<input type="number" <# number #> required 
			class="form-control" id="number" value="7.7">
	</div>
</div>
<div class="form-group">
	<label for="dollars" class="col-sm-4 control-label">Dollars</label>
	<div class="col-sm-4">
		<input type="dollars" <# dollars #> required 
			class="form-control" id="dollars" value="$7.77">
	</div>
</div>
<div class="form-group">
	<label for="date" class="col-sm-4 control-label">Date</label>
	<div class="col-sm-4">
		<input type="date" <# date #> required 
			class="form-control" id="date" value="1979-01-17">
	</div>
</div>
<div class="form-group">
	<label for="url" class="col-sm-4 control-label">URL</label>
	<div class="col-sm-4">
		<input type="url" <# url #> required 
			class="form-control" id="url" value="http://www.example.com">
	</div>
</div>
<div class="form-group">
	<label for="pattern" class="col-sm-4 control-label">Input Pattern: [A-Z]{2}[0-9]{4}</label>
	<div class="col-sm-4">
		<input type="text" <# pattern #> required pattern="[A-Z]{2}[0-9]{4}" 
			class="form-control" id="pattern" value="SK1024">
	</div>
	<div class="col-sm-4 help-block">
		<span class="text-danger">* 2 letters, followed by 4 numbers</span>
	</div>
</div>
<div class="form-group">
	<div class="col-sm-offset-4 col-sm-4">
		<button <# create button #> class="btn btn-primary">
			<big><b>Big Bold Create Button!</b></big>
		</button>
		<input type="button" <# Update button #> class="btn btn-primary">
		<input type="button" formnovalidate <# Delete button #> class="btn btn-primary">
	</div>
</div>

<# end form #>

The Hashtag Markup Language provides Forms to validate and store submitted data.  

The examples in this section demonstrate Post Restriction, Input Validations, and Form Actions.