Email and phone number validation javascript

Question

I want to make validation for my email input text and phone number input text. In the email, I want to put only '@gmail.com' and phone number the user only input number in the form. I already use JavaScript but it doesn't work.

function validation() {
  var mailformat = /^\w+([\.-]?\w+)*@gmail.com*(\.\w{2,3})+$/;
  var phoneno = /^\d{10}$/;
  if (document.getElementById("name").value.length == 0) {
    document.getElementById("message").innerHTML = "<em> You did not enter your name </em>";
    return false;
  }
  if (document.getElementById("email").value.match(mailformat) != mailformat) {
    document.getElementById("message1").innerHTML = "<em> please enter </em>";
    return false;
  }
  if (document.getElementById("postcode").value.length < 4) {
    document.getElementById("message2").innerHTML = "<em> Minimum is 4 Characters for Postcode </em>";
    return false;
  }
  if (document.getElementById("phone").value.length == 0) {
    document.getElementById("message3").innerHTML = "<em> You did not enter your phone </em>";
    return false;
  }
  return true;
}

<form class="form-horizontal container" method="POST" action="#" onsubmit="return validation()">
  <!-- Name Validation input -->
  <div class="form-group">
    <label class="control-label col-md-2 label1" style="text-align: left;" for="name">Name:</label>
    <div class="col-md-5">
      <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
      <span id="message"></span>
    </div>
  </div>
  <!-- Email Validation input -->
  <div class="form-group">
    <label class="control-label col-sm-2 label1" style="text-align: left;" for="email">Email:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="email" placeholder="Enter Email" name="email">
      <span id="message1"></span>
    </div>
  </div>
  <!-- Postcode Validation Input -->
  <div class="form-group">
    <label class="control-label col-sm-2 label1" style="text-align: left;" for="postcode">Postcode:</label>
    <div class="col-sm-5">
      <input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control" id="postcode" placeholder="Enter Postcode" name="postcode">
      <span id="message2"></span>
    </div>
  </div>
  <!-- Phone Validation Input -->
  <div class="form-group">
    <label class="control-label col-sm-2 label1" style="text-align: left;" for="phone">Phone:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="phone" placeholder="Enter Phone" name="phone">
      <span id="message3"></span>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit the query</button>&nbsp;&nbsp;&nbsp;<button type="reset" class="btn btn-default button3"> Reset</button>
  </div>
</form>

`document.getElementById("email").value.match(mailformat) != mailformat ` that is not how you check if it passed.... Not sure where you learned that from. — epascarello, Sep 03 '19 at 16:00
I put this code but when I type the wrong email. The code is not showing notification like "please enter email contain @gmail" and also when I put wrong value in the phone number like "P1234" in the input text, it doesn't error notification that i put wrong value — DRGN, Sep 03 '19 at 16:00
@epascarello I'm new with javascript. So, that's why I need to discuss about it in the StackOverflow. — DRGN, Sep 03 '19 at 16:01
Possible duplicate of [How to validate an email address in JavaScript](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Andrei, Sep 03 '19 at 16:23
@MarkReed I just want to make a specific email in the form. So, the user can input email only gmail.com but I don't know how to do it and i try to experiment but it's fail — DRGN, Sep 03 '19 at 16:31

score 1 · Answer 1 · answered Sep 03 '19 at 16:02

1

Match returns an array if it is matched. So comparing an array to a regular expression is wrong. You can use a truthy check

if(!document.getElementById("email").value.match(mailformat)) {

or use .test() instead.

answered Sep 03 '19 at 16:02

epascarello

195,511
20
184
225

my guess it is the reg exp. – epascarello Sep 03 '19 at 16:24

Asif · Accepted Answer · 2019-09-03T16:44:31.907

1

Use regex like this

var mailformat = /^\w+([\.-]?\w+)*[@gmail.com]*(\.\w{2,3})+$/; var email_val = document.getElementById("email").value; if(!email_val.match(mailformat)){ document.getElementById("message1").innerHTML = "<em> please enter email dsfsdfa</em>"; return false; }

You can make it more better, like apply validation for empty field before this too.

edited Sep 03 '19 at 16:44

answered Sep 03 '19 at 16:32

Asif

350
2
10

Updated, Please check again – Asif Sep 03 '19 at 16:44
can i use same logic in the phone validation @Asif – DRGN Sep 03 '19 at 16:52
1

Yes you can try, let me know if you have any issue. – Asif Sep 03 '19 at 16:59

score 0 · Answer 3 · answered Sep 03 '19 at 16:24

0

You could look at this website which shows basic javascript code for validation

https://getcodingkids.com/mission/mission-2/

answered Sep 03 '19 at 16:24

Andrei

1,023
2
13
30

score 0 · Answer 4 · answered Sep 03 '19 at 16:31

Where did you get your email validation regex? The pattern /^\w+([\.-]?\w+)*@gmail.com*(\.\w{2,3})+$/ matches (inefficiently) one or more words joined by periods or hyphens, followed by @gmail,followed by any character at all, followed by co, followed by any number of ms including zero, followed by at least one sequence of period plus two or three more letters. So it won't match anything ending in @gmail.com, but will match something ending in @gmail.co.uk or similar. So even if you fix the validation logic in the code, this regex won't match against any email address ending in gmail.com, which it sounds like you want to do..

I just want to make a specific email in the form. So, the user can input email only gmail.com but I don't know how to do it and i try to experiment but it's fail — DRGN, Sep 03 '19 at 16:32

Email and phone number validation javascript

4 Answers4