-
Notifications
You must be signed in to change notification settings - Fork 2
Project's core documentation
This wiki page covers the functional part of this validation API, with code examples. This will not be thorough. For a full API documentation, please check the [Technical Documentation] (url) // TODO
This page explains each functionality with a code example. Though, in order to minimise the overall output, we'll use the following HTML for all code snippets :
<html>
<head>
<title>JSV Documentation</title>
<head>
<body>
<form action="/send" method="POST">
<div>
<label for="firstname">Firstname: </label>
<input type="text" name="firstname" />
</div>
<div>
<label for="sex">Sex: </label>
<select name="sex">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
<div>
Choose 2 interests:
<label><input type="checkbox" name="interest" /> Sport</label>
<label><input type="checkbox" name="interest" /> Computer science</label>
<label><input type="checkbox" name="interest" /> Music</label>
</div>
<div>
<input type="submit" value="Send" />
</div>
</form>
<script type="text/javascript" src="jsv.js"></script>
<!-- Example code should be placed here -->
</body>
</html>In this code, right after the "form" part, you can see a Javascript import :
<script type="text/javascript" src="jsv.js"></script>This imports our validation engine. Once it's done, we need to instantiate it :
<script type="text/javascript">
jsValidator = new JSValidator('myFormId',
new Array(
new JSValidator.Rule('firstname', 'NotNull', {'message': 'Firstname should not be empty'}),
new JSValidator.Rule('interest', 'ChooseTwo', {
'message': 'You cannot choose more than 2 interests at once',
'max': 2
})
)
);
</script>In this constructor, you'll need to provide the HTML form's id, and an array of Validation Rules. Those contain 3 parts :
- the name of the element they're related to
- the constraint name (can be whatever you want)
- an array of related properties (message, size, min, max, etc.), i.e. whatever extra information used in the validation process
From now on, our validator will be available in any of our JS code using the "jsValidator" variable.
In order for the validation to take place, you'll need two more steps :
- Write the validation rule's implementation, if it doesn't exist already (See "#Write validation code" section)
- Define events on which validation should take place (See "#Bind Events" section)
Your validation rules contain a constraint name, that should match a validation method. Out-of-box, the most common already exist :
- NotBlank: Checks for not null or empty value
- NotEmpty: Checks for empty value
- NotNull: Checks for null value
- Length: Checks for a value length, given a "min" and/or "max" size
- // TODO