Rev 5506 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!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;}button, input[type="submit"], .button {margin-bottom: 8px;}/* 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, Hound, 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><div><div><!-- Make sure error class "has-error" gets all the way up to .form-group --><input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" /></div></div></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 with comma)</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 form-group"><label><input name="checkbox" type="checkbox" data-validation="required" /> Must be checked</label></div><div class="form-group"><label class="control-label">Must choose one</label><br /><input name="radio" type="radio" data-validation="required" value="1" /> A<input name="radio" type="radio" value="1" /> B<input name="radio" type="radio" value="1" /> C<input name="radio" type="radio" value="1" /> D</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" value="secret"data-validation-helssp="The word is "secret""data-validation="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-size="The file cant be larger than 400kb"data-validation-error-msg="You must upload an image file (max 400 kb)"data-validation-allowing="jpg, png, ico"data-validation-max-size="400kb" /></div><div class="form-group"><label class="control-label">File name</label><input type="text" name="some-file2" class="form-control"data-validation="extension required"data-validation-error-msg="You must write a file name with extension jpg|png|ico"data-validation-allowing="jpg, png, ico"/></div><div class="form-group"><label class="control-label">Callback validation, set this value to "1" andvalidation 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 style="line-height: 200%"><input type="submit" class="button"><br /><button class="button" type="button"onclick="alert('Form a is ' + ( $('#form-a').isValid({}, {}, false) ? 'VALID':'NOT VALID'));">Test validation via js (<strong>without error messages</strong>)</button><br /><button class="button" type="button"onclick="alert('Form a is ' + ( $('#form-a').isValid() ? 'VALID':'NOT VALID'));">Test validation via js (showing error messages)</button><br /><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><div class="form-group"><label class="control-label">Password</label><input name="pass" data-validation="confirmation" type="password" /></div><div class="form-group"><label class="control-label">Password again</label><input name="pass_confirmation" type="password" /></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="testmail" data-validation="email" data-validation-error-msg="E-mail is not valid" /></div><div class="form-group"><label class="control-label">Confirm e-mail</label><input name="test" data-validation="confirmation" data-validation-confirm="testmail" /></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><hr /><form id="form-d"><h2>HTML5 attributes</h2><div class="form-group"><label class="control-label">type="email"</label><input type="text" required="required" list="mejl" /><datalist id="mejl"><option value="Test">Test</option><option value="test2">test2</option><option value="test3">test3</option></datalist></div><div class="form-group"><label class="control-label">type="url" (optional)</label><input type="url" /></div><div class="form-group"><label class="control-label">type="number"</label><input type="number" required="required" /></div><div class="form-group"><label class="control-label">type="number"</label><input type="number" required="required" maxlength="30" /></div><div class="form-group"><label class="control-label">type="number" range[-5;5]</label><input type="number" min="-5" max="5" required="required" /></div><div class="form-group"><label class="control-label">pattern="^([a-z]+)$"</label><input type="text" name="some-colorz" list="some-colorz" pattern="^([a-z]+)$" required="required" /><datalist id="some-colorz" style="display: none"><option value="Green">Green</option><option value="Blue">Blue</option><option value="Red">Red</option><option value="Black">Black</option><option value="White">White</option></datalist></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 = '.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+', html5'+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) {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', 'top');window.applyValidation(false, '#form-b', 'element');window.applyValidation(true, '#form-c', $('#error-container'));window.applyValidation(true, '#form-d', 'element');// 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>