Poppa is a jQuery plugin which makes client-side form validation easy. It provides a basic customization and aims at being cross-browser compliant, reliable and lightweight (only 8kb minified). It comes with a handful of a useful validation methods, including URL and email validation and default error messages in English.
First, download Poppa here:
After extracting the file, include the Javascript at the bottom of your page before the closing </body> tag. Also, make sure jQuery, which is required by the plugin is also included:
<!-- Load jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/validation_new.js"></script>Include the CSS at the top of your page in your <head> tag:
<link rel="stylesheet" type="text/css" href="./css/validation.css">Initiate plugin on a existing form with javascript:
<script>
$('#your-form').validation();
</script>Can be applied to all types of inputs (including HTML5), textareas and select elements.
<input type="text" required>
<input type="checkbox" required>
<input type="radio" required>
<input type="file" required>
<textarea required></textarea>
<select required>
<option value="">---</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
<!-- HTML5 example -->
<input type="time" required>
Available options: min [int], max [int].
HTML5 attributes supported: minlenght, maxlenght.
<!-- Minimum 3 characters -->
<input type="text" data-validation-length="min:3" required>
<!-- Maximum 20 characters -->
<input type="text" data-validation-length="max:20" required>
<!-- Between 10 and 150 characters -->
<input type="text" data-validation-length="min:10,max:150" required>
<!-- Input is not required but it must be
at least 8 characters long if not empty. -->
<input type="text" data-validation-length="min:8">
<!-- HTML5 example. Between 2 and 30 characters -->
<input type="number" minlength="2" maxlength="30" required>
Available options: min [int], max [int].
HTML5 attributes supported: min, max.
<!-- Any numerical value -->
<input type="text" data-validation-type="number" required>
<!-- Value minumum 20 -->
<input type="text" data-validation-range="min:20" required>
<!-- Value maximum 50 -->
<input type="text" data-validation-range="max:50" required>
<!-- Value between -10 and 100 -->
<input type="text" data-validation-range="min:-10,max:100" required>
<!-- HTML5 example -->
<input type="number" min="10" max="30" required>
<input type="text" data-validation-type="email" required>
Valid url formats: https://www.example.com, https://example.com, www.example.com, example.com
<input type="text" data-validation-type="url" required>
Accepts only letters and numbers.
<input type="text" data-validation-type="alphanumeric" required>
Accepts only lowercase and uppercase letters.
<input type="text" data-validation-type="letters" required>
HTML5 attributes supported: pattern
<!-- Only uppercase letters -->
<input type="text" data-validation-regexp="^[A-Z]+$" required>
<input type="text" data-validation-hint="Some usefull hint" required>
<input type="text" data-validation-rqmessage="Hey, I will need that!" required>
By default each input will become validated immediately when you start typing into the input or the input looses focus. If you don't want this feature you can set 'liveValidation': false upon plugin initiation to disable it. An example below shows the same user registration form, but with live validation active.
<form class="user-registration>
<label>Login *</label>
<input name="login" type="text" data-validation-type="alphanumeric" data-validation-length="min:3,max:35" required>
<label>Email *</label>
<input name="email" type="text" data-validation-type="email" required>
<label>Password *</label>
<input name="password" data-validation-type="password" required>
<label>Website</label>
<input name="website" data-validation-type="url">
<label>Bio</label>
<textarea name="bio" data-validation-length="min:10,max:150" data-validation-hint="Describe yourself"></textarea>
<label>I agree to the terms of service *</label>
<input type="checkbox" data-validation-message="You have to agree to terms of service" required>
<button type="submit">Submit</button>
</form>
<script>
$('#user-registration').validation({
'autocomplete': 'off'
});
</script>Those options change the behaviour of the plugin. Unlike to input attributes, they refer to the entire form.
| Option | Default | Description |
|---|---|---|
| preventDefault | true | Prevents form from submitting. If set to false, form will be submitted even if there are invalid inputs. |
| sendForm | true | Prevents form from submitting even if provided data is valid. |
| autocomplete | on | Turns autocomplete on/off for the entire form. |
| liveValidation | true | For more details about live validation, click here. |
| noValidate | true | Disables default HTML5 form validation. |
| formInvalidAlertWarning | The form has not been completed correctly. Correct marked fields. | A message to display when form is invalid. |
| requiredMessage | function() | Custom error message for required inputs. Using this keyword inside function will refer to the current input. |