/ajax/libs/jquery-form-validator/2.1.47/form-test.html
HTML | 346 lines | 304 code | 42 blank | 0 comment | 0 complexity | 40e533f16e1b4340b46e164618957da9 MD5 | raw file
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Form Test</title>
- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" />
- <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" />
- <style>
- /* Form and inputs */
- form {
- width: 500px;
- margin: 0 auto;
- padding: 20px;
- display: block;
- }
- input.form-control {
- width: 375px;
- }
- /* While server is being requested */
- form.validating-server-side {
- background: #F2F2F2;
- }
- input.validating-server-side {
- opacity: 0.5;
- background: lightgoldenrodyellow;
- }
- /* modify inputs for password strength */
- .password-strength input.form-control {
- width: 375px;
- margin-right: 4px;
- display: inline;
- }
- .password-strength label {
- display: block;
- }
- /* Checkboxes */
- .form-group.check-boxes input {
- margin-left: 10px;
- }
- span.help {
- color: #999 !important;
- }
- /* Error container for form C */
- #error-container div {
- color: red;
- line-height: 140%;
- }
- #error-container div:last-child {
- padding-bottom: 10px;
- }
- </style>
- </head>
- <body>
- <div>
- <form action="" id="form-a" role="form">
- <div class="form-group">
- <label class="control-label" for="inline-suggestions">Inline suggestions</label>
- <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Fox, Tiger, Elephant" />
- </div>
- <div class="form-group">
- <label class="control-label" for="country-suggestions">Country suggestions</label>
- <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" />
- </div>
- <div class="form-group">
- <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
- <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" />
- </div>
- <div class="form-group">
- <label class="control-label">Year</label>
- <input name="birth" class="form-control"
- data-validation="date"
- data-validation-format="yyyy-mm-dd"
- data-suggestions="2014-01-15,2014-01-16,2014-01-17" />
- </div>
- <div class="form-group">
- <label class="control-label">Datepicker</label>
- <input name="birth2" class="form-control"
- data-validation="date"
- data-validation-format="mm/dd/yyyy"
- id="datepicker" />
- </div>
- <div class="form-group">
- <label class="control-label">Number 0-10 (accepting floats)</label>
- <input name="floats" class="form-control"
- data-validation="number"
- data-validation-allowing="range[0;10], float"
- data-validation-decimal-separator=","
- />
- </div>
- <div class="form-group password-strength">
- <label class="control-label" for="password">Display password strength (only strong)</label>
- <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" />
- </div>
- <div class="form-group">
- <label class="control-label">Alphanumeric and -_ and spaces</label>
- <input name="alphanumeric with spaces" class="form-control" name="test" data-validation="alphanumeric" data-validation-allowing="-_ " />
- </div>
- <div class="form-group">
- <label class="control-label">Alphanumeric only</label>
- <input name="aplhanumeric only" class="form-control" name="test2" data-validation="alphanumeric" />
- </div>
- <div class="checkbox">
- <label>
- <input name="checkbox" type="checkbox" data-validation="required" /> Must be checked
- </label>
- </div>
- <div class="form-group">
- <label class="control-label">Even numbers only</label>
- <input name="even numbers" class="form-control" name="test4" data-validation="even_number" />
- </div>
- <div class="form-group">
- <label class="control-label">Make a choice</label>
- <br />
- <select name="choice" data-validation="required" data-validation-error-msg="Please make a choice">
- <option value="">- - Choose - -</option>
- <option>A</option>
- <option>B</option>
- <option>C</option>
- <option>D</option>
- </select>
- </div>
- <div class="form-group">
- <label class="control-label">Text</label>
- (<span id="max-len">20</span> chars left)<br />
- <textarea id="text-area" class="form-control" name="some-text"></textarea>
- </div>
- <div class="form-group">
- <label class="control-label">Server validation</label>
- <input class="form-control" name="code"
- data-validation-help="The word is "secret""
- data-validation="alphanumeric server"
- data-validation-url="http://formvalidator.net/validate-email.php" />
- </div>
- <div class="form-group">
- <label class="control-label">File validation</label>
- <input type="file" name="some-file1" class="form-control"
- data-validation="size mime required"
- data-validation-error-msg="You must upload an image file"
- data-validation-allowing="jpg, png, ico"
- data-validation-max-size="100kb" />
- </div>
- <div class="form-group">
- <label class="control-label">File validation (multiple)</label>
- <input type="file" multiple="multiple" name="some-file2" class="form-control"
- data-validation="size mime required length"
- data-validation-length="min2"
- data-validation-error-msg="You must upload at least two image files"
- data-validation-allowing="jpg, png, ico"
- data-validation-max-size="100kb" />
- </div>
- <div class="form-group">
- <label class="control-label">
- Callback validation, set this value to "1" and
- validation will fail
- </label>
- <input id="callback" class="form-control" />
- </div>
- <div class="form-group check-boxes">
- <label>Checkbox group</label><br />
- <label>
- <input type="checkbox" name="box" value="1"
- data-validation="checkbox_group"
- data-validation-qty="1-2" /> 1
- </label>
- <label>
- <input type="checkbox" name="box" value="2" /> 2
- </label>
- <label>
- <input type="checkbox" name="box" value="3" /> 3
- </label>
- <label>
- <input type="checkbox" name="box" value="4" /> 4
- </label>
- <label>
- <input type="checkbox" name="box" value="5" /> 5
- </label>
- </div>
- <p>
- <input type="submit" class="button">
- <input type="reset" class="button">
- </p>
- </form>
- <hr />
- <form id="form-b">
- <div class="form-group">
- <label class="control-label">Test</label>
- <input name="test" data-validation="number" type="text" />
- </div>
- <p>
- <input type="submit" class="button">
- <input type="reset" class="button">
- </p>
- </form>
- <hr />
- <form id="form-c">
- <div class="form-group">
- <label class="control-label">Country</label>
- <input name="test" data-validation="country" data-validation-error-msg="No valid country given" />
- </div>
- <div class="form-group">
- <label class="control-label">E-mail</label>
- <input name="test" data-validation="email" data-validation-error-msg="E-mail is not valid" />
- </div>
- <div class="form-group">
- <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label>
- <input name="test2"
- data-validation="alphanumeric"
- data-validation-error-msg="Invalid..."
- data-validation-if-checked="checker" />
- <br />
- <input type="checkbox" name="checker" />
- </div>
- <div id="error-container">
- </div>
- <p>
- <input type="submit" class="button">
- <input type="reset" class="button">
- </p>
- </form>
- </div>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
- <script src="jquery.form-validator.js"></script>
- <script>
- (function($, window) {
- var dev = window.location.hash.indexOf('dev') > -1 ? '.dev' : '';
- // setup datepicker
- $("#datepicker").datepicker();
- // Add a new validator
- $.formUtils.addValidator({
- name : 'even_number',
- validatorFunction : function(value, $el, config, language, $form) {
- return parseInt(value, 10) % 2 === 0;
- },
- borderColorOnError : '',
- errorMessage : 'You have to give an even number',
- errorMessageKey: 'badEvenNumber'
- });
- window.applyValidation = function(validateOnBlur, forms, messagePosition) {
- if( !forms )
- forms = 'form';
- if( !messagePosition )
- messagePosition = 'top';
- $.validate({
- form : forms,
- language : {
- requiredFields: 'Du måste bocka för denna'
- },
- validateOnBlur : validateOnBlur,
- errorMessagePosition : messagePosition,
- scrollToTopOnError : true,
- borderColorOnError : 'purple',
- modules : 'security'+dev+', location'+dev+', sweden'+dev+', file'+dev+', uk'+dev,
- onModulesLoaded: function() {
- $('#country-suggestions').suggestCountry();
- $('#swedish-county-suggestions').suggestSwedishCounty();
- $('#password').displayPasswordStrength();
- },
- onValidate : function($f) {
- console.log('about to validate form '+$f.attr('id'));
- var $callbackInput = $('#callback');
- if( $callbackInput.val() == 1 ) {
- return {
- element : $callbackInput,
- message : 'This validation was made in a callback'
- };
- }
- },
- onError : function($form) {
- if( !$.formUtils.haltValidation ) {
- alert('Invalid '+$form.attr('id'));
- }
- },
- onSuccess : function($form) {
- alert('Valid '+$form.attr('id'));
- return false;
- }
- });
- };
- $('#text-area').restrictLength($('#max-len'));
- window.applyValidation(true, '#form-a', 'element');
- window.applyValidation(false, '#form-b', 'element');
- window.applyValidation(true, '#form-c', $('#error-container'));
- // Load one module outside $.validate() even though you do not have to
- $.formUtils.loadModules('date'+dev+'.js', false, false);
- $('input')
- .on('beforeValidation', function() {
- console.log('About to validate input "'+this.name+'"');
- })
- .on('validation', function(evt, isValid) {
- var validationResult = '';
- if( isValid === null ) {
- validationResult = 'not validated';
- } else if( isValid ) {
- validationResult = 'VALID';
- } else {
- validationResult = 'INVALID';
- }
- console.log('Input '+this.name+' is '+validationResult);
- });
- })(jQuery, window);
- </script>
- <body>
- </html>