title: textbox validation with jquery
body: <p>I am new to JQuery.
  I want to do the validation to four text box using jquery.</p>
  
  <p>Coding i have done</p>
  
  <pre><code>  &lt;html&gt;
      &lt;head&gt;
        &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
        &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
        &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  
         &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"&gt;
         &lt;script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
         &lt;link href="runnable.css" rel="stylesheet" /&gt;
         &lt;script src="//code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
         &lt;script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"&gt;&lt;/script&gt;
  
            &lt;script&gt;
                $(function() {
                   $("#register-form").validate({
                    rules: {
                          firstname: "required",
                          lastname: "required",
                           email: {
                           required: true,
                           email: true
                          },
               password: {
                           required: true,
                           minlength: 5
                        },
                         agree: "required"
                   },
  
  
                messages: {
                         firstname: "Please enter your first name",
                         lastname: "Please enter your last name",
                password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                          },
                        email: "Please enter a valid email address",
                       agree: "Please accept our policy"
                         },
  
                  submitHandler: function(form) {
                    form.submit();
                }
             });
  
          });
  
         &lt;/script&gt;
       &lt;/head&gt;
    &lt;body&gt;
            &lt;h1&gt;Register here&lt;/h1&gt;
         &lt;form action="" method="post" id="register-form" novalidate="novalidate"&gt;
            &lt;div class="label"&gt;First Name&lt;/div&gt;&lt;input type="text" id="firstname" name="firstname" /&gt;&lt;br /&gt;
            &lt;div class="label"&gt;Last Name&lt;/div&gt;&lt;input type="text" id="lastname" name="lastname" /&gt;&lt;br /&gt;
            &lt;div class="label"&gt;Email&lt;/div&gt;&lt;input type="text" id="email" name="email" /&gt;&lt;br /&gt;
            &lt;div class="label"&gt;Password&lt;/div&gt;&lt;input type="password" id="password" name="password" /&gt;&lt;br /&gt;
            &lt;div style="margin-left:140px;"&gt;&lt;input type="submit" name="submit" value="Submit" /&gt;&lt;/div&gt;
  
       &lt;/form&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the red color messages , but it is not displaying the proper error messages.</p>