Parsley.js Form Validation

For more information, see documentation at parsleyjs.org . To include in your project, add <script src="/scripts/parsley.min.js"> to the head or header include. Basic setup just requires data-parsley-validate on the form tag.

<form data-parsley-validate>
	<!-- the fields... -->
</form>

For required fields, "This value is required." is the defualt error message. Use data-parsley-required-message attribute on the form tag to set a different message for that error on all fields with required. You can apply custom messages on the whole form or onto individual fields.

<!-- required can be implemented multiple ways -->
<form data-parsley-validate data-parsley-required-message="This field is required">
	<div class="field-group">
		<label class="label">A text field</label>
		<input type="text" class="input" required>
	</div>
	<div class="field-group">
		<label class="label">An email field</label>
		<input type="email" class="input" data-parsley-error-message="Boop">
	</div>		
	<div class="field-group">
		<label class="label">A number field</label>
		<input type="number" class="input" min="1" max="5">
	</div>		
	<div class="field-group">
		<label class="label">A password field</label>
		<input type="password" class="input" required=""> 
	</div>
</form>

For a field that needs a custom element to assign the error message to, like for checkboxes and radio buttons, use the attribute data-parsley-errors-container and assign the id of the element to it (proceed name with # sign). The element should be below the fields it corresponds to within the same .selection-controls. It should have class .alt-errors and a unique id.

<div class="selection-controls">
	<label class="label selection-controls__set-label">
		Choose Any
	</label>

	<div class="selection-controls__layout selection-controls__layout--horizontal">
		<div class="selection-controls__pairs">
			<input type="radio" name="example1" id="rad-1" value="one" data-parsley-errors-container="#afield_error" class="selection-controls__input" required="">
			<label for="rad-1" class="selection-controls__label">Option 1</label>
		</div>
		<div class="selection-controls__pairs">
			<input type="radio" name="example1" id="rad-2" value="two" data-parsley-errors-container="#afield_error" class="selection-controls__input" required="">
			<label for="rad-2" class="selection-controls__label">Option 2</label>
		</div>
	</div>	

	<!-- container for error message -->
	<div id="afield_error" class="alt-errors"></div>
</div>