How Can I Add Phone Number Validation and Make sure Users Input Eleven Digits On My Form?-CodePudding

I designed a form with onclick function, The function of the form is to help users verify if their phone number has not been used on my website by another person.

If the phone number they provide has been used before, they will get a notification to Login instead.

If their phone number has not been used, they will be redirected to the next page.

Phone number digits in my country are 11 digits, However, I noticed that if users input any number of digits, they will still be redirected to the next page instead of getting an error message that says "Invalid Phone Number Format"

How do I add phone number validation to my form? Make sure users input 11 digits? And stop my form from redirecting unless users input the correct phone number format?

Thanks for any help and corrections.

Below are my codes.

/* myScript.js */
function check(form) /*function to check userid & password*/ {
  /*the following code checkes whether the entered userid and password are matching*/
  if (form.usercheck1.value == "1234" ||
    form.usercheck1.value == "12345"
  ) {
    alert("An account already exist with this phone number! \nKindly login to continue.") /*displays error message*/
  } else if (form.usercheck1.value == "" || form.usercheck1.value == null) {
    alert("Please provide your phone number!");
  } else {
    window.location.replace('https://www.google.com')
    /*opens the target page while Id & password matches*/

<link href="https://dl.dropbox.com/s/n2rdyum6kwm7hny/Loginin%20Button%20Animation.css" rel="stylesheet" type="text/css"></link><link href="https://dl.dropbox.com/s/qprekw79zsldo2b/input%20box.css" rel="stylesheet" type="text/css"></link>

<div class="bg-img">
  <div class="separator" style="clear: both; text-align: center;">
    <br /></div>
  <div class="separator" style="clear: both; text-align: center;">
    <img border="0" data-original-height="512" data-original-width="512" height="230" src="https://1.bp.blogspot.com/-EZYNAhXAq1M/YGbnrRsFYeI/AAAAAAAAAMU/6rGjRKv9UvMGn3doDe5_kT1WbOUFZjzUACLcBGAsYHQ/s0/administartor.gif" width="220" /></div>
  <div style="text-align: center;"><span style="font-family: Architects Daughter; font-size: medium;"><b>New Registration</b></span></div>
  <div style="text-align: center;"><span style="color: red; font-family: Courgette;"><b>Check if your phone number has not been used on our platform</b></span></div>
  <div style="text-align: center;"><span style="color: red; font-family: Courgette;"><b>before you proceed.</b></span></div>
  <div style="text-align: center;"><span style="font-family: Architects Daughter; font-size: medium;"><b>Input your phone number below.</b></span></div>
  <div style="text-align: center;">
    <form autocomplete="off" id="formName" name="formName">

      <input class="input5" maxlength="11" id="myform_phone" name="usercheck1" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" style="font-family: Courgette;" type="text" placeholder="Phone number here..." />
      <br />
      <center><button class="button" onclick="check(this.form)" type="button" value=""><span>Proceed </span></button></center>
    </form>

CodePudding user response：

You can use a pattern attribute on input (more here). It specifies a regex that value should match. If you want get just 11 numbers, you can set it to something like this:

 <input name="usercheck1" pattern="[0-9]{11}" ...rest of your code />

Or you could set type of input to number and set minlength and maxlength to 11.

CodePudding user response：

how about added the validation to your javascript

else if (form.usercheck1.value.length<11 || form.usercheck1.value.length>11) { alert("phone number should be 11 digits!");}