Form
Demo
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"] }
}