Input Phone Number either Email Address in jQuery

JavaScript
1

we generally use separate textbox for mobile or emailAddr like ;

 `<input type="email" name="email" placeholder="john@domain.com">`
 `<input type="tel" name="phone" placeholder="1234567890">`

but, I want create a single textbox where it work both attr(type =tel/email). means this is my jsFiddle https://jsfiddle.net/saidulu401/3y4kcqsj/4/ here the code I show as I want to create but I am familiar with angular and my website is on jQuery fully.

How I convert my jsfiddle to jQuery.
Please help to make code

2

You can use pattern attribute on a regular input element.

<input type="text" name="emailphone" ng-model="userData.user" id="emailphone"  required
    ng-pattern="/^(?:\d{10}|\w+@\w+\.\w{2,3})$/" />

becomes:

<input type="text" name="emailphone" id="emailphone"  required pattern="/^(?:\d{10}|\w+@\w+\.\w{2,3})$/" />

Ref.: https://www.w3schools.com/TAGS/att_input_pattern.asp

1 Like
3

@James_Hibbard this is simple pattern , How we add jquery code which help auto hide error if pattern match else show error…

4

Like this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #errors {
        display: none;
      }
    </style>
  </head>
  <body>
    <form>
      <ul id="errors">
        <li>Please enter an email or a telephone number</li>
      </ul>

      <input type="text" name="emailphone" id="emailphone" required />

      <button>Submit</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#emailphone').on('keyup', function() {
        if (!/^(?:\d{10}|\w+@\w+\.\w{2,3})$/.test(this.value)) {
          $('#errors').show();
          $('button').prop('disabled', true);
        } else {
          $('#errors').hide();
          $('button').prop('disabled', false);
        }
      });
    </script>
  </body>
</html>

Also, please be aware that the regex isn’t wonderful. It marks jim+sitepoint@example.com as invalid, which it isn’t.

2 Likes
5

Hi @HermioneGranger, if you want to keep the validation constraints in the markup you can just check the validity state of the element:

<!-- 
  Note the `novalidate` attribute on the form -- without it, 
  the native browser validation will kick in as well. 
-->
<form novalidate>
  <ul id="errors">
    <li>Please enter an email or a telephone number</li>
  </ul>

  <input type="text" name="emailphone" id="emailphone" pattern="^(?:\d{10}|\w+@\w+\.\w{2,3})$" />

  <button>Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $('#emailphone').on('keyup', function() {
    var mismatch = this.validity.patternMismatch

    $('#errors').toggle(mismatch)
    $('button').prop('disabled', mismatch)
  })
</script>

Hope you don’t mind me borrowing your markup @James_Hibbard… :-)

However, as @James_Hibbard noted validating an email “manually” is notoriously error-prone – see this classic thread on SO. I think there’s an npm module that just exports this regexp (from that very thread), but I can’t find it ATM… anyway it’s something I wouldn’t want to be responsible for myself really. ^^

A somewhat hacky but more robust solution might be to create an email input in-memory only, sync it with the actual input value and use that for the email-part of the validation:

<form novalidate>
  <ul id="errors">
    <li>Please enter an email or a telephone number</li>
  </ul>

  <!-- Only use the (also rather questionable) phone validation pattern here -->
  <input type="text" name="emailphone" id="emailphone" pattern="^\d{10}$" />

  <button>Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  var email = $('<input />', {
    type: 'email'
  }).get(0)

  $('#emailphone').on('keyup', function() {
    email.value = this.value

    var mismatch = (
      this.validity.patternMismatch &&
      email.validity.typeMismatch
    )
    
    $('#errors').toggle(mismatch)
    $('button').prop('disabled', mismatch)
  })
</script>
2 Likes
6

#ItsGreat VoteUp

7

Its good but mail pattern not well, But I has been fixed in my original code. thanks for answering.

8

Oh cool. I had no idea you could do this. I’ll have to look into that some more.

One mini improvement to your code (aside from using semis :troll:) would be to trigger a keyup event to hide the error message on page load:

$('#emailphone').on('keyup', function() {
  ...
}).trigger('keyup');

Indeed. I normally just check for <anything>@<anything>.<anything>. If you need to know that someone really owns the address they have entered, send them a mail with a confirmation link.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.