ssd-form
Version:
jQuery plugin to handle form validation and submission
430 lines (343 loc) • 14.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSD Form</title>
<link href="./assets/css/foundation.min.css" rel="stylesheet">
<link href="./assets/css/ssd-form.css" rel="stylesheet">
<link href="./assets/css/app.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="large-6 medium-8 columns large-offset-3 medium-offset-2">
<h3>Default validation rules</h3>
<div data-form-wrapper>
<form
method="post"
action="./submit.php"
data-ajax-form
data-success-behaviour="fadeOutShowMessage"
novalidate
>
<label for="title">
Selected option must be <kbd>Mr</kbd>
<span data-validation="title">
<span data-case="required">Please select your title</span>
<span data-case="value_is">Selected value must be Mr</span>
</span>
</label>
<select
name="title"
id="title"
data-validate="required|value_is:1"
>
<option value="">Select title</option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Ms</option>
</select>
<label for="first_name">
Minimum length must be <kbd>3 characters</kbd>
<span data-validation="first_name">
<span data-case="required">Please provide your first name</span>
<span data-case="min">Length must be at least 3 characters</span>
<span data-case="response">Validation triggered by ajax response</span>
</span>
</label>
<input
type="text"
name="first_name"
id="first_name"
data-validate="required|min:3"
placeholder="Your first name *"
>
<label for="last_name">
Minimum length must be <kbd>3 characters</kbd>
<span data-validation="last_name">
<span data-case="required">Please provide your last name</span>
<span data-case="min">Length must be at least 3 characters</span>
</span>
</label>
<input
type="text"
name="last_name"
id="last_name"
data-validate="required|min:3"
placeholder="Your last name *"
>
<label for="email">
Value must be a valid <kbd>email address</kbd>
<span data-validation="email">
<span data-case="required">Please provide your email address</span>
<span data-case="email">Invalid email address</span>
</span>
</label>
<input
type="email"
name="email"
id="email"
data-validate="required|email"
placeholder="Your email address *"
>
<label for="password">
Value must be a <kbd>password matching regex</kbd> and confirmed
<span data-validation="password">
<span data-case="required">Please choose your password</span>
<span data-case="password">Length must be at least 6 characters, one capital letter and one number</span>
<span data-case="confirmed">Passwords do not match</span>
</span>
</label>
<input
type="password"
name="password"
id="password"
data-validate="required|password|confirmed"
placeholder="Password"
>
<label for="password_confirmation">
Value must be a <kbd>password matching regex</kbd> and match password field
<span data-validation="password_confirmation">
<span data-case="required">Please confirm your password</span>
<span data-case="min">Length must be at least 5 characters</span>
</span>
</label>
<input
type="password"
name="password_confirmation"
id="password_confirmation"
data-validate="required|password"
placeholder="Confirm password"
>
<label for="ignored_field">
This field will be ignored because it does not have a valid attribute
</label>
<input type="text" id="ignored_field" data-validate="required" placeholder="Type something">
<div class="primary callout">
<label>
One option must be selected
<span data-validation="delivery">
<span data-case="radio">You must select one option</span>
</span>
</label>
<label for="delivery-1">
<input type="radio" name="delivery" id="delivery-1" value="1" data-validate="radio"> Option 1
</label>
<label for="delivery-2">
<input type="radio" name="delivery" id="delivery-2" value="2"> Option 2
</label>
<label for="delivery-3">
<input type="radio" name="delivery" id="delivery-3" value="3"> Option 3
</label>
</div>
<div class="secondary callout">
<label>
At least one option must be selected
<span data-validation="category">
<span data-case="min">You must select at least one option</span>
</span>
</label>
<label for="category-1">
<input type="checkbox" name="category[]" id="category-1" value="1" data-validate="min:1"> Option 1
</label>
<label for="category-2">
<input type="checkbox" name="category[]" id="category-2" value="2"> Option 2
</label>
<label for="category-3">
<input type="checkbox" name="category[]" id="category-3" value="3"> Option 3
</label>
</div>
<div class="secondary callout">
<label>
Exactly one option must be selected
<span data-validation="type">
<span data-case="min">You must select exactly one option</span>
<span data-case="max">You must select exactly one option</span>
</span>
</label>
<label for="type-1">
<input type="checkbox" name="type[]" id="type-1" value="1" data-validate="min:1|max:1"> Option 1
</label>
<label for="type-2">
<input type="checkbox" name="type[]" id="type-2" value="2"> Option 2
</label>
<label for="type-3">
<input type="checkbox" name="type[]" id="type-3" value="3"> Option 3
</label>
</div>
<label>
Checkbox must be checked
<span data-validation="terms">
<span data-case="checked">You must agree to our newsletter and conditions</span>
</span>
</label>
<label for="terms">
<input
type="checkbox"
name="terms"
id="terms"
data-validate="checked"
> I agree to the terms and conditions
</label>
<input
type="submit"
class="button"
value="SEND ENQUIRY"
data-submit-trigger
>
<button
type="button"
class="button hide"
disabled
data-submit-pending
>
<i class="fa fa-spinner fa-spin"></i> PROCESSING
</button>
</form>
<p data-confirmation></p>
</div>
<hr />
<h3>Custom action and serialize attribute</h3>
<div data-form-wrapper>
<form
method="post"
data-custom-form
data-success-behaviour="fadeOutShowMessage"
novalidate
>
<label for="custom_title">
Selected option must be <kbd>Mr</kbd>
<span data-validation="custom_title">
<span data-case="required">Please select your title</span>
<span data-case="value_is">Selected value must be Mr</span>
</span>
</label>
<select
data-field="custom_title"
id="custom_title"
data-validate="required|value_is:1"
>
<option value="">Select title</option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Ms</option>
</select>
<input
type="submit"
class="button"
value="SEND ENQUIRY"
data-submit-trigger
>
<button
type="button"
class="button hide"
disabled
data-submit-pending
>
<i class="fa fa-spinner fa-spin"></i> PROCESSING
</button>
</form>
</div>
<hr />
<h3>Custom regex</h3>
<div data-form-wrapper>
<form
method="post"
data-ajax-form
data-success-behaviour="reload"
novalidate
>
<label for="custom_regex">
The string must contain only capital letters <kbd>^[A-Z]+$</kbd>
<span data-validation="custom_regex">
<span data-case="required">Please select your title</span>
<span data-case="regex">Invalid format</span>
</span>
</label>
<input
type="text"
name="custom_regex"
id="custom_regex"
data-validate="required|regex"
data-regex="^[A-Z]+$"
placeholder="ID number"
>
<input
type="submit"
class="button"
value="SEND ENQUIRY"
data-submit-trigger
>
<button
type="button"
class="button hide"
disabled
data-submit-pending
>
<i class="fa fa-spinner fa-spin"></i> PROCESSING
</button>
</form>
</div>
<hr />
<h3>CKEDITOR</h3>
<div data-form-wrapper>
<form
method="post"
data-ajax-form
data-success-behaviour="reload"
novalidate
>
<label for="body">
Please provide a body
<span data-validation="body">
<span data-case="required">Please provide a body</span>
</span>
</label>
<textarea
name="body"
id="body"
data-validate="required"
placeholder="Body"
class="editor"
></textarea>
<br />
<input
type="submit"
class="button"
value="SEND ENQUIRY"
data-submit-trigger
>
<button
type="button"
class="button hide"
disabled
data-submit-pending
>
<i class="fa fa-spinner fa-spin"></i> PROCESSING
</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<script src="./src/jquery.ssd-form.js"></script>
<script>
$(function() {
$('.editor').each(function() {
window.CKEDITOR.replace($(this).attr('id'));
});
$('form[data-ajax-form]').ssdForm();
$('form[data-custom-form]').ssdForm({
serializeAttribute: 'data-field',
actionMethod: function(form, form_model, success, error) {
console.log('Calling action method');
form.endRequest(form_model);
}
});
});
</script>
</body>
</html>