CSS Text Fields

Text fields
Tab 1 content
	                <form class="form" data-fc-modules="form-validation">
	<fieldset>
		<legend>Text fields</legend>
		<div data-fc-modules="tabs">
			<section id="tab-1" data-fc-name="Tab 1">
				<div class="box-text">Tab 1 content</div>
			</section>
			<section id="tab-2" data-fc-name="Tab 2">
				<ol>
					<li>
						<label for="text-field">Name</label>
						<input name="name" type="text" id="text-field" required placeholder="E.g. John"/>
					</li>
				</ol>
			</section>
			<section id="tab-3" data-fc-name="Tab 3">
				<ol>
					<li>
						<label for="url-field">URL Field</label>
						<input name="url" type="url" id="url-field" required />
					</li>
				</ol>
			</section>
		</div>
		<ol>

			<li>
				<label for="email-field">Email Field</label>
				<input name="email" type="email" id="email-field" required placeholder="email" />
			</li>
			<li>
				<label for="Password-field">Password Field</label>
				<input name="password" type="password" id="Password-field" required />
			</li>
		</ol>
		<button type="submit" class="button button-ok">Send</button>
	</fieldset>
</form>
                

Add the following attributes to any input to validate them:


Attributes

required

Validate that a required field has been filled with a non blank value.

type="email"

Validates that a value is a valid email address.

type="number"

Validates that a value is a valid integer.

data-fc-type="digits"

alidates that a value is only digits.

data-fc-type="alphanum"

Validates that a value is a valid alphanumeric string.

type="url"

Validates that a value is a valid url.

minlength="6"

Validates that the length of a string is at least as long as the given limit.

maxlength="6"

Validates that the length of a string is not larger than the given limit.

min="6"

Validates that a given number is greater than or equal to some minimum number.

max="10"

Validates that a given number is less than or equal to some maximum number.

type="range"

Validates that a given number is between some minimum and maximum number.

pattern="\d+"

Validates that a value matches a specific regular expression (regex).

data-fc-mincheck="3"

Validates that a certain minimum number of checkboxes in a group are checked.

data-fc-maxcheck="3"

Validates that a certain maximum number of checkboxes in a group are checked.

data-fc-equalto="#anotherfield"

Validates that the value is identical to another field's value (useful for password confirmation check).