parsleyjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Parsley, the ultimate frontend javascript form validation library"> <meta name="author" content="Guillaume Potier"> <title>Parsley - Examples and form demonstration</title>  <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">  <link href="assets/docs.css" rel="stylesheet">   <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" rel="stylesheet"> <link href="../src/parsley.css" rel="stylesheet"> <style> body { color: #111111; } .row { margin-top: 10px; } .code-block { margin-top: 20px; } .hidden { display: none; } .row a h2, .row h2 { color: #FF851B; height: 66px; } .row a p { color: #111; text-align: justify; } .row .link { color: #428bca; } </style> </head> <body> <div class="container"> <div class="masthead"> <div class="header"> <h3 class="text-muted"><a href="../">Parsley</a></h3> <span class="social-buttons inline-block"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://parsleyjs.org" data-text="Parsley, the ultimate javascript form validation library. #parsleyjs" data-via="guillaumepotier" data-related="guillaumepotier" data-hashtags="parsleyjs">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> </span> </div> </div> <ul class="nav nav-justified"> <li><a href="../">Home</a></li> <li class="active"><a href="examples.html">Examples</a></li> <li><a href="index.html">Documentation</a></li> <li><a href="download.html">Download</a></li> <li><a href="help.html">Help</a></li> <li><a href="annotated-source/main.html">Annotated source</a></li> <li><a href="tests.html">Tests</a></li> <li><a href="about.html">About</a></li> </ul>  <div class="row"> <a href="examples/simple.html"> <div class="col-lg-4"> <h2>A simple demo form to showcase various inputs</h2> <p class="argument">A simple demo form that uses most of supported Parsley elements to show how to <strong>bind, configure and validate them properly.</strong> For more information, please have a look at the documentation.</p> <p class="link">View example »</p> </div> </a> <a href="examples/events.html"> <div class="col-lg-4"> <h2>Using events to make complex validations</h2> <p class="argument">Sometimes, regular validators and regular Parsley validation process <strong>is not enough</strong> for your forms. <strong>See how you could leverage Parsley events</strong> to make incredible validations!</p> <p class="link">View example »</p> </div> </a> <a href="examples/multisteps.html"> <div class="col-lg-4"> <h2>A multi steps form with Parsley validation</h2> <p class="argument">Sometimes, you'll need to split <strong>long and fastidious forms</strong> into multiple parts. See how you could leverage <strong>Parsley groups</strong> to easily validate such multi step forms, step by step.</p> <p class="link">View example »</p> </div> </a> </div> <div class="row"> <a href="examples/customvalidator.html"> <div class="col-lg-4"> <h2>Craft your own validators demo</h2> <p class="argument">Sometimes, you'll need to create <strong>custom validators for your needs</strong> because default built-in ones are simply not enough. See how you could do it and make very powerful <strong>custom reusable validators</strong>.</p> <p class="link">View example »</p> </div> </a> <a href="examples/custom-validator-events.html"> <div class="col-lg-4"> <h2>Validating a group on inputs</h2> <p class="argument">Validations dependent on more than one inputs can be difficult to achieve (and we are working on this). See how you could leverage Parsley's ability to <strong>validate <tt><div></tt> and other non inputs</strong> to validate groups of inputs!</p> <p class="link">View example »</p> </div> </a> <div class="col-lg-4"> <h2>Stylish floating error labels</h2> <p class="argument"><a href="https://twitter.com/zslabs">Zach Schnackel</a> shows us how to style inputs to make beautiful floating error labels.</p> <a href="http://codepen.io/zslabs/pen/eNegqY" target="_blank"> <p class="link">View example »</p> </a> </div> </div>  <div class="footer"> <p>© <a href="https://twitter.com/guillaumepotier" title="Guillaume Potier on Twitter">Guillaume Potier</a> 2014 - <a href="http://wisembly.com">@Wisembly</a></p> </div> </div> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="../bower_components/bootstrap/js/affix.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script> <script type="text/javascript" src="../dist/parsley.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-37229467-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>