Problem with phone number validation function

Question

Working on a simple registration form in Javascript and I can't quite figure out why my phone validation function isn't working. What I'm trying to do is

Make the field optional. If the user doesn't put anything in the field, the form will still be valid and submit
If the user puts in a phone number, it must be in an XXX-XXX-XXXX format.

Any and all help is appreciated.

Here is my code

function validateform() {
  var username = document.getElementById('username');
  var password = document.getElementById('password');
  var firstname = document.getElementById('firstname');
  var lastname = document.getElementById('lastname');
  var dob = document.getElementById('dob');
  var email = document.getElementById('email');
  var phone = document.getElementById('phone');

  if (username.value.length < 8) {
    alert("Username must be at least 8 characters");
    username.focus();
    return false;
  }
  if (password.value.length < 8) {
    alert("Password must be at least 8 characters");
    password.focus();
    return false;
  }
  let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid()
  if (!isVaild) {
    alert("Date must be in MM/DD/YYYY format");
    dob.focus();
    return false;
  }
}

function validatePhone() {
  var num1 = document.getElementById('phone').value;
  if (num1 !== "" && !num1.match(/\(\d{2}\)\d{8}/)) {
    alert('That is not a correct telephone number format');
    return false;
  }
}

function vailddatecheck(dateString) {
  var dateforvailidation = dateString.value;
  var isVaild = moment(dateforvailidation, 'MM/DD/YYYY', true).isVaild();
  if (isVaild) {
    return true;
  } else {
    alert("Date must be in MM/DD/YYYY format");
    form.dob.focus();
    return false;
  }
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Totally Legit Registration Page</title>
  <link href="Mod4style.css" rel="stylesheet">
</head>

<body>
  <form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
    <input type="text" id="username" placeholder="User Name">
    <p class="error"></p>
    <input type="password" id="password" placeholder="Password">
    <p class="error"></p>
    <input type="firstname" id="firstname" placeholder="First Name">
    <p class="error"></p>
    <input type="lastname" id="lastname" placeholder="Last Name">
    <p class="error"></p>
    <input type="dob" id="dob" placeholder="Date of Birth">
    <p class="error"></p>
    <input type="email" id="email" placeholder="Email">
    <p class="error"></p>
    <input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">
    <p class="error"></p>
    <button type="Submit" onClick="">Submit</button>
    <button type="Reset">Reset</button>
  </form>
  <script <script src="formvalidation.js" charset="utf-8"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>

</html>

your current regex `/$\d{2}$\d{8}/` will match "(xx)xxxxxxxx" which is nothing like your required format. Did you copy this regex from somewhere? See [RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp). — yqlim, Mar 18 '19 at 03:40
https://stackoverflow.com/questions/4338267/validate-phone-number-with-javascript possible duplicate question — Xun, Mar 18 '19 at 03:43
try this `if(num1 !='' && !/^\d{3}-?\d{3}-?\d{4}$/.test(num1)) return false;` Here dashes `-` are optional. in `/^\d{3}-\d{3}-\d{4}$/` dashes are mandatory. — Alex Kudryashev, Mar 18 '19 at 03:48

Maheer Ali · Answer 1 · 2019-03-18T03:59:14.483

The function validate validatePhone() will never be called due to

<input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">

onsubmit will should be added to <form> and in the end of validateform add

return validatePhone()

And correct regex is following

^(\d{3}-){2}\d{4}$

The last problem is using match() match always return array which is always trucy. Even Boolean([]) will be true. So !num1.match(/$\d{2}$\d{8}/ will always be false. You should use RegExp.prototype.test.

if (num1 !== "" && !/(\d{3}-){2}\d{4}/.test(num1))

function validateform() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var dob = document.getElementById('dob');
var email = document.getElementById('email');
var phone = document.getElementById('phone');

if(username.value.length < 8){
alert("Username must be at least 8 characters");
username.focus();
return false;
}
if (password.value.length < 8) {
alert("Password must be at least 8 characters");
password.focus();
return false;
}
let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid()
if (!isVaild)
{
alert("Date must be in MM/DD/YYYY format");
  dob.focus();
  return false;
}

return validatePhone();
}

function validatePhone()
{
  console.log('x')
  var num1 = document.getElementById('phone').value;
  if (num1 !== "" && !/(\d{3}-){2}\d{4}/.test(num1))
  {
    alert('That is not a correct telephone number format');
    return false;
  }
}

function vailddatecheck(dateString) {
var dateforvailidation = dateString.value;
var isVaild = moment(dateforvailidation, 'MM/DD/YYYY' , true).isVaild();
if (isVaild) {
return true;
}
else {
  alert("Date must be in MM/DD/YYYY format");
  form.dob.focus();
  return false;
}
}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Totally Legit Registration Page</title>
    <link href="Mod4style.css" rel="stylesheet">
  </head>
  <body>
    <form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
      <input type="text" id="username" placeholder="User Name">
      <p class="error"></p>
      <input type="password" id="password" placeholder="Password">
      <p class="error"></p>
      <input type="firstname" id="firstname" placeholder="First Name">
      <p class="error"></p>
      <input type="lastname" id="lastname" placeholder="Last Name">
      <p class="error"></p>
      <input type="dob" id="dob" placeholder="Date of Birth"  >
      <p class="error"></p>
      <input type="email" id="email" placeholder="Email">
      <p class="error"></p>
      <input type="phone" id="phone" placeholder="Phone Number">
      <p class="error"></p>
      <button type="Submit" onClick="">Submit</button>
      <button type="Reset">Reset</button>
    </form>
    <script <script src="formvalidation.js" charset="utf-8"></script>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
</html>

Excellent that worked perfectly. I just have one last question for you. I'm not clear on how to do this but when the user presses submit and everything is correct, it should pop up with a message along the lines of "Form Submitted Successfully" If I'm correct, I need to call up the validateform function but I'm unclear what I need to do — magishine, Mar 18 '19 at 13:59

score 0 · Answer 2 · answered Mar 18 '19 at 03:45

0

Your regex is incorrect. Try /^\d{3}-\d{3}-\d{4}$/. The regex you provided will match any number of the format (##)########

answered Mar 18 '19 at 03:45

chris.va.rao

373
1
10

邹泽宇 · Answer 3 · 2019-03-18T03:40:44.407

function validateform() {
  var username = document.getElementById('username');
  var password = document.getElementById('password');
  var firstname = document.getElementById('firstname');
  var lastname = document.getElementById('lastname');
  var dob = document.getElementById('dob');
  var email = document.getElementById('email');
  var phone = document.getElementById('phone');

  if (username.value.length < 8) {
    alert("Username must be at least 8 characters");
    username.focus();
    return false;
  }
  if (password.value.length < 8) {
    alert("Password must be at least 8 characters");
    password.focus();
    return false;
  }
  let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid()
  if (!isVaild) {
    alert("Date must be in MM/DD/YYYY format");
    dob.focus();
    return false;
  }
}

function validatePhone() {
  var num1 = document.getElementById('phone').value;
  if (num1 !== "" || !num1.match(/\(\d{2}\)\d{8}/)) {
    alert('That is not a correct telephone number format');
    return false;
  }
}

function vailddatecheck(dateString) {
  var dateforvailidation = dateString.value;
  var isVaild = moment(dateforvailidation, 'MM/DD/YYYY', true).isVaild();
  if (isVaild) {
    return true;
  } else {
    alert("Date must be in MM/DD/YYYY format");
    form.dob.focus();
    return false;
  }
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Totally Legit Registration Page</title>
  <link href="Mod4style.css" rel="stylesheet">
</head>

<body>
  <form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()">
    <input type="text" id="username" placeholder="User Name">
    <p class="error"></p>
    <input type="password" id="password" placeholder="Password">
    <p class="error"></p>
    <input type="firstname" id="firstname" placeholder="First Name">
    <p class="error"></p>
    <input type="lastname" id="lastname" placeholder="Last Name">
    <p class="error"></p>
    <input type="dob" id="dob" placeholder="Date of Birth">
    <p class="error"></p>
    <input type="email" id="email" placeholder="Email">
    <p class="error"></p>
    <input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">
    <p class="error"></p>
    <button type="Submit" onClick="">Submit</button>
    <button type="Reset">Reset</button>
  </form>
  <script <script src="formvalidation.js" charset="utf-8"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>

</html>

While this code may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — 4b0, Mar 18 '19 at 03:40

Problem with phone number validation function

3 Answers3