Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## Form Validation

Rules are quite customizable and can be expressed in JavaScript sections and not in the code markup.

form2.html

    <html>
    <head>
      <title>A Form to Illustrate Validation using the jQuery Validation Plugin</title>
      <link rel="stylesheet" type="text/css" href="form.css"/>
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
      var validation = $("#myForm").validate(
        {
        rules: {
          name:  { required: true, minlength: 2 },
          email: { required: true, email: true },
          url:   { required: true, url: true }
        }
      });
    });
    </script>
    </head>
    <body>
    <form id="myForm" method="post" action="http://cscie12.dce.harvard.edu/echo">
    <fieldset>
       <legend>A Form to Illustrate Validation using the jQuery Validation Plugin</legend>
       <p>
         <label for="name">Name</label><br/>
         <input id="name" name="name" size="25"/>
       </p>
       <p>
         <label for="email">Email Address</label><br/>
         <input id="email" name="email" size="25"/>
       </p>
       <p>
         <label for="url">URL</label><br/>
         <input id="url" name="url" size="25"  value="" />
       </p>
     <p>
         <input class="submit" type="submit" value="Submit"/>
       </p>
     </fieldset>
     </form>
    </body>
    </html>

Copyright © David Heitmeyer