Email address validation using jquery

Question

I am working on email validation for a login page using jQuery. The problem I am facing is only the else part is getting executed and not if part. Below is the code.

$(document).ready(function () {
    $('#my-input').focusout(function () {
        emailValidate();
    });

    function emailValidate() {
        var reg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        var email = $('#my-input').val();
        if (reg.test('email')) {
            console.log('correct');
            $('#my-input').css('border', '2px solid green');
            $('#span1').css('display', 'none');
        } else {
            $('#my-input').css('border', '2px solid red');
            $('#span1').css('display', 'block');
        }
    }
});

Roko C. Buljan · Accepted Answer · 2021-08-07 18:48:10Z

Should be email as Variable, not as String

var email = $('#my-input').val();
if ( reg.test(email) ) {

Here's a slight remake with the mentioned fix.
It uses a CSS class to determine the styles. JS is only used to toggle that has-error class from the common parent label element.

It also doesn't uses IDs. data-validate is a far more flexible option!

const has = {
  value: (val) => val.trim().length > 0,
  email: (val) => /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(val),
  // add more validators here
};


jQuery(function($) { // DOM ready and $ alias inn scope

  function validate() {
    const isValid = has[this.dataset.validate](this.value);
    $(this).closest("label").toggleClass("has-error", !isValid);
  }

  $("[data-validate]").on("focusout", validate);
  
});

/*QuickReset*/ *,*::before,*::after{margin:0; box-sizing:border-box;}
body {font:16px/1.6 sans-serif;}


label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 5px;
  border: 2px solid transparent;
}

label input {
  flex: 1;
}

label.has-error {
  border: 2px solid red;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, red, fuchsia);
}

label .error {
  color: red;
  display: none;
}

label.has-error .error {
  display: inline-block;
}

<label>
  <span class="placeholder">Name:</span>
  <input type="text" name="name" data-validate="value">
  <span class="error">Name cannot be empty</span>
</label>
<label>
  <span class="placeholder">Email:</span>
  <input type="text" name="email" data-validate="email">
  <span class="error">Invalid Email address</span>
</label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

PS: makes no sense to use "green" colors to mark something OK in UI. It's the same logic in which you would never show an alert box saying "Hey! Your email is correct!". Users presume it's correct if not marked otherwise.

Collectives™ on Stack Overflow

Email address validation using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related