Speed up development with full-stack environments for every branch.

Learn More

How to validate your form with Parsly.js [jQuery and JavaScript]

Forked from How to use the jQuery $().ready function.

2252 Runs 12004 Views 6082 Copies
Saved

Saved

zarknight 7

zarknight
published 3 years ago

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Parsly.js form validation Example</title>
  
  <!-- Bootstrap CSS Toolkit styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="container">

    <!-- This form will be validated in parsley way. -->
    <form id="my-form" data-validate="parsley">
        <label for="username">Username * :</label>
        <input type="text" id="username" name="username" data-required="true" />

        <label for="email">Email Address * :</label>
        <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

        <label for="blog">Your Blog Website :</label>
        <input type="text" id="blog" name="blog" data-trigger="change" data-type="url" />

        <label for="overview">Overview (10 chars min, 200 max) :</label>
        <textarea id="overview" name="overview" data-trigger="keyup" data-rangelength="[10,200]"></textarea>

        <br/>
        
        <!-- Validate all the form fields by clicking this button -->
        <a class="btn" id="btn-form-valid" onclick="$('#my-form').parsley('validate');">Validate All</a>
    </form>

  </div>

  <!-- Load jQuery and the Parsley JS files to enable parsley form validation -->
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/parsley.min.js"></script>

</body> 
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).