Form

Demo

Sex* Please choose your sex
You must accept the terms and conditions

Code

<form class="c-form" method="post" data-form data-action="../api/fetch.php" novalidate>
	<p data-fetch-error hidden role="alert">There was an error in sending the form.</p>
	<p data-success hidden role="alert">Thank you. The form has been successfully sent.</p>
	<div data-form-content>
		<div class="row">
			<!-- Input (text) -->
			<div class="col">
				<label class="field">
					<span>Name*</span>
					<input type="text" name="name" required>
					<span class="error-text">Please fill out your name</span>
				</label>
			</div>
			<!-- Input (email) -->
			<div class="col">
				<label class="field">
					<span>Email*</span>
					<input type="email" name="email" required data-required-email>
					<span class="error-text">Please fill out your email</span>
				</label>
			</div>
		</div>
		<div class="row">
			<!-- Input (text) -->
			<div class="col">
				<label class="field">
					<span>Address*</span>
					<input type="text" name="address" required>
					<span class="error-text">Please fill out your address</span>
				</label>
			</div>
			<!-- Select -->
			<div class="col">
				<label class="field">
					<span>Country*</span>
					<div class="select">
						<select name="country" required>
							<option value="0">Select</option>
							<option value="FI">Finland</option>
							<option value="SE">Sweden</option>
							<option value="DE">Germany</option>
						</select>
					</div>
					<span class="error-text">Please choose your country</span>
				</label>
			</div>
		</div>
		<!-- Radio group. Note: aria-describedby is required here. -->
		<fieldset class="field" role="radiogroup" aria-describedby="form-field-sex">
			<legend>Sex*</legend>
			<label class="c-checkbox">
				<input type="radio" name="sex" value="M" required>
				<span>Male</span>
			</label>
			<label class="c-checkbox">
				<input type="radio" name="sex" value="F" required>
				<span>Female</span>
			</label>
			<span class="error-text" id="form-field-sex">Please choose your sex</span>
		</fieldset>
		<!-- Textarea -->
		<label class="field">
			<span>Message*</span>
			<textarea name="message" required></textarea>
			<span class="error-text">Please fill out your message</span>
		</label>
		<!-- Checkbox -->
		<div class="field">
			<label class="c-checkbox">
				<input type="checkbox" name="terms" value="1" required>
				<span>I accept the terms and conditions</span>
			</label>
			<span class="error-text">You must accept the terms and conditions</span>
		</div>
		<!-- Button -->
		<div class="form-button">
			<button class="c-button" type="submit" data-submit>
				Send
				<div class="c-loader m-reverse">
					<div class="inner"></div>
				</div>
			</button>
		</div>
	</div>
</form>
// Initialize for all elements in the DOM
Form.setup();

// Initialize for elements in a NodeList or Array
Form.setup(document.querySelectorAll(".elements"));

// Initialize for one element
var form = new Form(document.querySelector("#element"));

The back end must return a JSON object indicating success or failure. if there are validation errors in the back end, they must be returned in an array.

function callback(data) {
	console.log(data);

	// Logs on success
	// Object { success: true }

	// Logs on failure. The errors array must contain the name attribute of the respective field.
	// Object { success: false, errors: ["name", "email"] }
}