title: Validation on custom username and password using jQuery
body: <p>In given code, I want to validate a custom username and password only for demo purposes. If the custom username and password does not match then it should display an error: "Incorrect user ID or password. Please type the correct user ID and password, and try again." </p>
  
  <pre><code>Username: user@lc.com
  Password: 12345
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(e) {
    $('#btnValidate').click(function() {
      var sEmail = $('#username').val();
      if ($.trim(sEmail).length == 0) {
        $('.error-msg.username').show();
        e.preventDefault();
      }
      if (validateEmail(sEmail)) {
        $('.error-msg.username').hide();
      } else {
        $('.error-msg.username').show();
        e.preventDefault();
      }
    });
    
    $('#btnValidate').click(function() {
      if ($('#password').val().length === 0) { //if password field is empty           
        $('.error-msg.password').show();
      }
      if ($('#password').val().length) { //if password has value      
        $('.error-msg.password').hide();
      }
    });
  });
  
  function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
      return true;
    } else {
      return false;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form {
    padding: 50px 100px;
  }
  
  .error-msg {
    display: none;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="form"&gt;
    &lt;div class="error-msg username"&gt;
      Please enter your user ID in email format (name@domain.com).
    &lt;/div&gt;
    &lt;div class="error-msg password"&gt;
      Please enter your password.
    &lt;/div&gt;
    &lt;div class="error-msg up-error"&gt;
      Incorrect user ID or password. &lt;br&gt; Please type the correct user ID and password, and try again.
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="userName"&gt;USER NAME&lt;/label&gt;
      &lt;input type="text" class="form-control" id="username" name="username"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="pwd"&gt;PASSWORD&lt;/label&gt;
      &lt;input type="password" class="form-control" id="password" name="password"&gt;
    &lt;/div&gt;
    &lt;button type="submit" id='btnValidate' class="btn btn-block btn-primary"&gt;SIGN IN&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="http://jsfiddle.net/alpeshlahad/86nrq2wu/22/" rel="nofollow noreferrer">JS Fiddle Demo</a></strong></p>