Validation

<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>
				<ol>
					<li>
						<label for="select-field">Select field</label>
						<div class="select">
							<select id="select-field" required>
								<option value>---</option>
								<option value="1">Choice 1</option>
								<option value="2">Choice 2</option>
								<option value="3">Choice 3</option>
							</select>
						</div>
					</li>
				</ol>
			</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>
			<li>
				<button type="submit" class="button _primary">Send</button>
			</li>
		</ol>
	</fieldset>
</form>

Settings

Attributes

data-fc-language

Defines the language of the error messages. By default gets the browser language but you can force it using this parameter. (en, es, it...)

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"

Validates 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).