title: JavaScript client side validation is not working
body: <p>I have designed a login page, but client side validation is not working. I have written JavaScript code for validation. And how to make email extension acceptance only particular comp id. ex: user@example.com. It should accept only example.com email id's. I have tried to to give extension: "example.com" in JavaScript validation, but it's not working.</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- This file has been downloaded from Bootsnipp.com. Enjoy! --&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- Font CSS (Via CDN) --&gt;
      &lt;link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'&gt;
      &lt;!-- Favicon --&gt;
      &lt;link rel="shortcut icon" href="img/favicon.ico"&gt;
      &lt;!--Table container----&gt;
      &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/login.css" rel="stylesheet"&gt;
      &lt;script src="js/ValidationFormScript.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;nav class="navbar navbar-light" style="background-color: #e3f2fd;"&gt;
      &lt;!-- Navbar content --&gt;
    &lt;/nav&gt;
    &lt;!---Body starts here----&gt;
    &lt;body&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;section class="login-block"&gt;
        &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-12 col-md-8 banner-sec"&gt;
            &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                &lt;div class="carousel-item active"&gt;
                  &lt;img class="img-fluid" src="img/logo.jpg" alt="First slide"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12 col-md-4 login-sec"&gt;
            &lt;!---Break line after header ----&gt;
            &lt;br /&gt;
            &lt;!--- Form starts here-----&gt;
            &lt;form class="login-form" method="" action="" id="admin-form"&gt;
              &lt;!---- Starts the User ID section---&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="exampleInputEmail" class="text-left"&gt;&lt;span&gt;User ID&lt;/span&gt;&lt;/label&gt;
                &lt;span class="input-status" data-toggle="tooltip" data-placement="top"  title="Input your email"&gt;&lt;/span&gt;
                &lt;input type="email" class="form-control" id="email" name="email" placeholder="enter email"&gt;
              &lt;/div&gt;
              &lt;!---- Starts the Password section---&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="exampleInputPassword" class="text-left"&gt;&lt;span&gt;Password&lt;/span&gt;&lt;/label&gt;
                &lt;span class="input-status" data-toggle="tooltip" data-placement="top"  title="Input your password"&gt;&lt;/span&gt;
                &lt;input type="password" class="form-control" name="password" id="password"  placeholder="enter password"&gt;
              &lt;/div&gt;
              &lt;!---- Ends the Password section---&gt;
              &lt;!---Submit button---&gt;
              &lt;div class="form-group"&gt;
                &lt;button type="submit" class="btn btn-login float-right"&gt;Login&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;!----- Script for Validation-----&gt;
      &lt;!-- jQuery Validate Plugin--&gt;
      &lt;script src="js/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        jQuery(document).ready(function() {
        
          "use strict";
        
          // Init Theme Core    
          Core.init();
        
          // Init Demo JS     
          Demo.init();
        
          /* @custom validation method (smartCaptcha) 
          ------------------------------------------------------------------ */
        
          $.validator.methods.smartCaptcha = function(value, element, param) {
            return value == param;
          };
        
          $("#admin-form").validate({
        
            /* @validation states + elements 
            ------------------------------------------- */
        
            errorClass: "state-error",
            validClass: "state-success",
            errorElement: "em",
        
            /* @validation rules 
            ------------------------------------------ */
        
            rules: {
              firstname: {
                required: true
              },
              lastname: {
                required: true
              },
              email: {
                required: true,
                email: true,
          extension: ""
              },
              website: {
                required: true,
                url: true
              },
              language: {
                required: true
              },
              upload1: {
                required: true,
                extension: "jpg|png|gif|jpeg|doc|docx|pdf|xls|rar|zip"
              },
              mobileos: {
                required: true
              },
              comment: {
                required: true,
                minlength: 30
              },
              mobile_phone: {
                require_from_group: [1, ".phone-group"]
              },
              home_phone: {
                require_from_group: [1, ".phone-group"]
              },
              password: {
                required: true,
                        },
              repeatPassword: {
                required: true,
                minlength: 6,
                maxlength: 16,
                equalTo: '#password'
              },
              gender: {
                required: true
              },
              languages: {
                required: true
              },
              verification: {
                required: true,
                smartCaptcha: 19
              },
              applicant_age: {
                required: true,
                min: 16
              },
              licence_no: {
                required: function(element) {
                  return $("#applicant_age").val() &gt; 19;
                }
              },
              child_name: {
                required: "#parents:checked"
              }
        
            },
        
            /* @validation error messages 
            ---------------------------------------------- */
        
            messages: {
              firstname: {
                required: 'Enter first name'
              },
              lastname: {
                required: 'Enter last name'
              },
              useremail: {
                required: 'Enter email address',
                email: 'Enter a VALID email address'
              },
              website: {
                required: 'Enter your website URL',
                url: 'URL should start with - http://www'
              },
              language: {
                required: 'Choose a language'
              },
              upload1: {
                required: 'Please browse a file',
                extension: 'File format not supported'
              },
              mobileos: {
                required: 'Please select a mobile platform'
              },
              comment: {
                required: 'Oops you forgot to comment',
                minlength: 'Enter at least 30 characters or more'
              },
              mobile_phone: {
                require_from_group: 'Fill at least a mobile contact'
              },
              home_phone: {
                require_from_group: 'Fill at least a home contact'
              },
              password: {
                required: 'Please enter a password'
              },
              repeatPassword: {
                required: 'Please repeat the above password',
                equalTo: 'Password mismatch detected'
              },
              gender: {
                required: 'Please choose specie'
              },
              languages: {
                required: 'Select laguages spoken'
              },
              verification: {
                required: 'Please enter verification code',
                smartCaptcha: 'Oops - enter a correct verification code'
              },
              applicant_age: {
                required: 'Enter applicant age',
                min: 'Must be 16 years and above'
              },
              licence_no: {
                required: 'Enter licence number'
              },
              child_name: {
                required: 'Please enter your childs name'
              }
        
            },
        
            /* @validation highlighting + error placement  
            ---------------------------------------------------- */
        
            highlight: function(element, errorClass, validClass) {
              $(element).closest('.field').addClass(errorClass).removeClass(validClass);
            },
            unhighlight: function(element, errorClass, validClass) {
              $(element).closest('.field').removeClass(errorClass).addClass(validClass);
            },
            errorPlacement: function(error, element) {
              if (element.is(":radio") || element.is(":checkbox")) {
                element.closest('.option-group').after(error);
              } else {
                error.insertAfter(element.parent());
              }
            }
        
          });
        
        
          // Cache several DOM elements
          var pageHeader = $('.content-header').find('b');
          var adminForm = $('.admin-form');
          var options = adminForm.find('.option');
          var switches = adminForm.find('.switch');
          var buttons = adminForm.find('.button');
          var Panel = adminForm.find('.panel');
        
          // Form Skin Switcher
          $('#skin-switcher a').on('click', function() {
            var btnData = $(this).data('form-skin');
        
            $('#skin-switcher a').removeClass('item-active');
            $(this).addClass('item-active')
        
            adminForm.each(function(i, e) {
              var skins = 'theme-primary theme-info theme-success theme-warning theme-danger theme-alert theme-system theme-dark'
              var panelSkins = 'panel-primary panel-info panel-success panel-warning panel-danger panel-alert panel-system panel-dark'
              $(e).removeClass(skins).addClass('theme-' + btnData);
              Panel.removeClass(panelSkins).addClass('panel-' + btnData);
              pageHeader.removeClass().addClass('text-' + btnData);
            });
        
            $(options).each(function(i, e) {
              if ($(e).hasClass('block')) {
                $(e).removeClass().addClass('block mt15 option option-' + btnData);
              } else {
                $(e).removeClass().addClass('option option-' + btnData);
              }
            });
        
            // var sliders = $('.ui-timepicker-div', adminForm).find('.ui-slider');
            $('body').find('.ui-slider').each(function(i, e) {
              $(e).addClass('slider-primary');
            });
        
            $(switches).each(function(i, ele) {
              if ($(ele).hasClass('switch-round')) {
                if ($(ele).hasClass('block')) {
                  $(ele).removeClass().addClass('block mt15 switch switch-round switch-' + btnData);
                } else {
                  $(ele).removeClass().addClass('switch switch-round switch-' + btnData);
                }
              } else {
                if ($(ele).hasClass('block')) {
                  $(ele).removeClass().addClass('block mt15 switch switch-' + btnData);
                } else {
                  $(ele).removeClass().addClass('switch switch-' + btnData);
                }
              }
        
            });
            buttons.removeClass().addClass('button btn-' + btnData);
          });
        
          setTimeout(function() {
            adminForm.addClass('theme-primary');
            Panel.addClass('panel-primary');
            pageHeader.addClass('text-primary');
        
            $(options).each(function(i, e) {
              if ($(e).hasClass('block')) {
                $(e).removeClass().addClass('block mt15 option option-primary');
              } else {
                $(e).removeClass().addClass('option option-primary');
              }
            });
        
            // var sliders = $('.ui-timepicker-div', adminForm).find('.ui-slider');
            $('body').find('.ui-slider').each(function(i, e) {
              $(e).addClass('slider-primary');
            });
        
            $(switches).each(function(i, ele) {
              if ($(ele).hasClass('switch-round')) {
                if ($(ele).hasClass('block')) {
                  $(ele).removeClass().addClass('block mt15 switch switch-round switch-primary');
                } else {
                  $(ele).removeClass().addClass('switch switch-round switch-primary');
                }
              } else {
                if ($(ele).hasClass('block')) {
                  $(ele).removeClass().addClass('block mt15 switch switch-primary');
                } else {
                  $(ele).removeClass().addClass('switch switch-primary');
                }
              }
            });
            buttons.removeClass().addClass('button btn-primary');
          }, 800);
        
        
        
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style type="text/css"&gt;
          @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
  .login-block{
      background: #fff;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #fff, #fff);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #fff, #fff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  float:left;
  width:100%;
  padding : 50px 0;
  }
  .banner-sec{background:#fff;  no-repeat left bottom; background-size:cover; min-height:0px; border-radius: 0 10px 10px 0; padding:0;}
  
  .carousel-inner{border-radius:10px 10px 10px 10px;}
  }
  .login-sec{padding: 60px 30px; position:relative;}
  .login-sec .copy-text{position:absolute; width:100%; bottom:20px; font-size:13px; text-align:left;}
  .login-sec .copy-text i{color:#FEB58A;}
  .login-sec .copy-text a{color:#E36262;}
  .login-sec h2{margin-bottom:30px; font-weight:400; font-size:30px; color: grey;}
  .btn-login{background: #90EE90; color:#000; font-weight:400;}
  .banner-text{width:70%; position:absolute; bottom:40px; padding-left:20px;}
  .banner-text p{color:#fff;}
  .carousel-caption {
      position: absolute;
      left: 3%;
      right: 26%;
      bottom: 160px;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #ffffff;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   font: Century Gothic;
   font-weight: 400;
  }
  
  body {
      font-family: "Helvetica Neue",Century Gothic,Century Gothic,Century Gothic;
      font-size: 14px;
      line-height: 1.428571429;
      color: grey;
      background-color: #fff;
  }
   .palel-primary
   {
    border-color: #bce8f1;
   }
   .panel-primary&gt;.panel-heading
   {
    background:#bce8f1;
    
   }
   .panel-primary&gt;.panel-body
   {
    background-color: #EDEDED;
   }
   
   input {
      margin-top: 5px;
      margin-bottom: 5px;
      display:inline-block; 
      *display: inline;     /* for IE7*/
      zoom:1;              /* for IE7*/
      vertical-align:middle;
      margin-left:20px
  }
  
  label {
      display:inline-block;
      *display: inline;     /* for IE7*/
      zoom:1;              /* for IE7*/
      float: left;
      padding-top: 5px;
      text-align: right;
      width: 80px;
  }
   .form-control {
      display: block;
      width: 77%;
      height: 32px;
   }
   .label{
   color: black;
   }
   label span { color: black; 
   font-weight: normal !important;}
   
   a {
      text-decoration: none !important;
  }
  body {
      margin-bottom:50px;
  }
      &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JavaScript code for validation, but it's not working. </p>