How can i validate Telephone field only using vanilla JS-CodePudding

I have a telephone field to validate. I tried many regexp fixes but nothing was worked for me. Can anyone help me on this. My requirement is as follows.

Phone field can contain (only in front of the number)
Phone field can contain space characters
Phone field should only allow numbers

My code is as follows: Thanks in advance!

function doit() {
let phonenumber = document.getElementById('phonenumber');
let phonenumbervalue = phonenumber.value;

let spacefilter=/^[\ \d] (?:[\d-.\s()]*)$/;
let allowspace=spacefilter.test(phonenumbervalue); // setting the email field to validate

if (phonenumbervalue=='') {
    phonenumber.nextElementSibling.classList.add('show');
                phonenumber.nextElementSibling.nextElementSibling.classList.remove('show');
                phonenumber.nextElementSibling.nextElementSibling.nextElementSibling.classList.remove('show');  
                document.myform.phonenumber.focus();
    return false;
  } 
 
   else if (allowspace===true) {
    phonenumber.nextElementSibling.nextElementSibling.nextElementSibling.classList.remove('show');
    phonenumber.nextElementSibling.nextElementSibling.classList.remove('show');     phonenumber.nextElementSibling.classList.remove('show');        
                document.myform.phonenumber.focus();
                return false;
  }

  
  else {
                phonenumber.nextElementSibling.nextElementSibling.nextElementSibling.classList.remove('show');
    phonenumber.nextElementSibling.nextElementSibling.classList.remove('show'); 
                phonenumber.nextElementSibling.classList.remove('show');    
  }
}

body {font-family:arial;}
input {width:350px; height:40px; line-height:40px;margin-bottom:10px;text-indent:10px;}
.btn-dft {background:#555;color:#fff;font-size:14px;padding:15px;border:none;cursor:pointer;}
.validation {transition:all 0.3s linear 0s;position:relative;top:-3px;height:0;overflow:hidden;opacity: 0; color:#FD6F01;font-size: 14px;}
.one {transition:all 0.3s linear 0s;position:relative;top:-3px;height:0;overflow:hidden;opacity: 0; color:#FD6F01;font-size: 14px;}
.show {height:auto;opacity:1;top:0;margin-bottom: 15px}

<form name="myform" onsubmit="doit(); return false" novalidate>
<div > 
<input type="text" class='input' name='phonenumber' id="phonenumber" placeholder="Phone Number" />
<div class='validation'>Please enter the Number</div>
<div class='validation'>Please enter a Valid Number</div>
<div class='validation'>Phone Number required minimum 6 Nos</div>
</div>  
<button type="submit" class='btn-dft'>Submit</button>
</form>

CodePudding user response：

I couldn't understand the exact pattern you are looking for, but I've implemented a simple snippet below by your requirment. Is this what you are looking for?

function doit() {
  let phonenumbervalue = document.getElementById('phonenumber').value.replace(/\s/g, '');
  const phonePattern = /^\ ?\d{6,}$/;

  if (phonenumbervalue == '') {
    showError(0);
    return false;
  }

  if (phonenumbervalue.replace(/\ /, '').length < 6) {
    showError(2);
    return false;
  }

  if (phonePattern.test(phonenumbervalue) == false) {
    showError(1);
    return false;
  }

  hideError();
  alert('ok');
}

function hideError() {
  const currentVisibleError = document.querySelector('.validation.show');

  if (currentVisibleError) {
    currentVisibleError.classList.remove('show');
  }
}

function showError(index) {
  hideError();
  const validationErrors = document.querySelectorAll('.validation');
  validationErrors[index].classList.add('show');
  document.myform.phonenumber.focus();
}

body {
  font-family: arial;
}

input {
  width: 350px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  text-indent: 10px;
}

.btn-dft {
  background: #555;
  color: #fff;
  font-size: 14px;
  padding: 15px;
  border: none;
  cursor: pointer;
}

.validation {
  transition: all 0.3s linear 0s;
  position: relative;
  top: -3px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: #FD6F01;
  font-size: 14px;
}

.one {
  transition: all 0.3s linear 0s;
  position: relative;
  top: -3px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: #FD6F01;
  font-size: 14px;
}

.show {
  height: auto;
  opacity: 1;
  top: 0;
  margin-bottom: 15px
}

<form name="myform" onsubmit="doit(); return false" novalidate>
  <div >
    <input type="text"  name="phonenumber" id="phonenumber" placeholder="Phone Number" />
    <div >Please enter the Number</div>
    <div >Please enter a Valid Number</div>
    <div >Phone Number required minimum 6 Nos</div>
  </div>
  <button type="submit" >Submit</button>
</form>

CodePudding user response：

I don't really know your exact requirements for what phone numbers you would accept, but you could see if this doesn't work for you:

function validate(input) {
  if (/^\ ?[0-9 ] $/.test(input)) {
    let matches = input.match(/\d/g);
    if (matches.length === 11 || matches.length === 10) {
      return true;
    }
    return false;
  } else {
    return false;
  }
}

console.log(validate(" 1 303 555 5555"));
console.log(validate("1 303 555 5555"));
console.log(validate("303 555 5555"));
console.log(validate("3035555555"));
console.log(validate(" 13035555555"));
console.log(validate("3035555555"));

console.log(validate("3 035555555") === false);
console.log(validate("303 d555555") === false);
console.log(validate("303 555 555") === false);
console.log(validate(" 1 303 5555 5555") === false);

CodePudding user response：

I don't have a direct answer. But you can use the following approach.

Go to https://keycode.info/. From here you can get the keycodes that can be tracked JS Vanilla JS. You can use if statements to validate if it is included in the keys you want.

E.g if (keyCode == 49) // 49 is key code for 1

Also, make sure you consider both the num keys, i.e. on numpan and num rows.

I will try to update this comment with proper code but meanwhile hope this helps.