How can I check if a variable is a specific type using javascript?

Question

I'm a beginner in web development and I have an HTML form where a person can add his address , address number, region and postal code . In this form the address and the region have to contain only char letters .

(ex. Lakewood : correct Lakewood13 : error) . If any of these two variables contains a number I have to enter my data again to continue . Else, I move to the next page . I'm a complete beginner in javascript which I need to use to check my variable types and I would appreciate your help with guiding me to solve this problem . This is my code with my HTML form with the address number and the region which are the variables we need in this problem :

function checkdata(){

  //the two elements we need to check
  var a = document.getElementById("address");
  var r = document.getElementById("region");

  if(typeof(a.value) === 'string'&&(typeof b.value) ==='string'){
  //continue to next page(but how can I check if numbers are in the strings ?)
  }

  else{
    //go back to form and enter again(how can I enter the elements again ? )    

  }

}

<div class = "form-area" id = "forma"> 

  <form action="/action.page.html" class = "sign-form" > 

    <div class = "form-container">

      <h1> Enter purchase data below : </h1> 

      <label for="addrs">  Address Name</label>
      <input type = "text" placeholder = "Enter address name "  id = "address" name = "addr" required/> 

      <label for="regn" > Region </label>

      <input type = "text" placeholder = "Enter region " id = "region" name = "reg" required/>  
    </div>
    <button type="submit" class="continuebtn" onclick = "checkdata()">Continue</button> 
  </form>

</div>

Thank you in advance .

Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, May 16 '20 at 12:13
Inputs will **always return a string value** so `typeof` is useless to you, use a `regexp` as suggested in an answer. — Adam Jenkins, May 16 '20 at 12:19

Mamun · Accepted Answer · 2020-05-16T20:12:28.113

You can try using regex to check if string contains any number in it:

if(!(/\d/.test(a.value)) && !(/\d/.test(b.value))){

Please Note: You also have to return false to prevent the default event if the condition is false and prefix return the function call in onclick attribute.

Demo:

function checkdata(){
  //the two elements we need to check
  var a = document.getElementById("address");
  var r = document.getElementById("region");
  if(!(/\d/.test(a.value)) && !(/\d/.test(r.value))){
    alert('form submit');
  }
  else{
    alert('no submit');  
    return false;
  }
      
}

<div class = "form-area" id = "forma"> 
  
  <form action="/action.page.html" class = "sign-form" > 

    <div class = "form-container">

      <h1> Enter purchase data below : </h1>   

      <label for="addrs"   Address Name</label>
      <input type = "text" placeholder = "Enter address name "  id = "address" name = "addr" required/> 

      <label for="regn" > Region </label>

      <input type = "text" placeholder = "Enter region " id = "region" name = "reg" required/> 

    </div>
    <button type="submit" class="continuebtn" onclick = "return checkdata()">Continue</button>

  </form>

 </div>

So inside this if statement in test() I import my variable let's say it is called a like : if(!(/\d/.test(a) ? — Vasilis Skentos, May 16 '20 at 12:19
@VasilisSkentos, no, you have to put the value of the element....`.test(a.value)`. — Mamun, May 16 '20 at 12:21
@VasilisSkentos, i have update the answer with other fixes in your code, please check:) — Mamun, May 16 '20 at 12:29

score 0 · Answer 2 · answered May 16 '20 at 12:25

You can write a function for validity, then you can check for dependencies based on that **

function checkData() {
 let adress = document.getElementById('address');
 let region = document.getElementById('region');

 function isValid(e) {
  let isTrue;
  for (let char in e) {
   typeof e[char] !== 'string' ? alert('Please only type strings') : (isTrue = true);
  }
  return isTrue;
 }
 isValid(adress.value) && isValid(region.value) ? console.log('next page') : console.log('error');
}

checkData();

**

score 0 · Answer 3 · answered May 16 '20 at 12:26

So need to check if the strings are containing numbers or not

hope you find more insight here: Check whether an input string contains a number in javascript

working demo :

// check if string contains number
function hasNumber(myString) {
    return /\d/.test(myString);
}


function checkdata(e) {
    e.preventDefault()
    //the two elements we need to check
    var a = document.getElementById("address");
    var r = document.getElementById("region");
    var isAddressContainsNumber = hasNumber(a.value);
    var isRegionContainsNumber = hasNumber(r.value);

    console.log(isAddressContainsNumber, isRegionContainsNumber)

    if (isAddressContainsNumber === false && isRegionContainsNumber === false) {
        console.log('None of string contains number')
    } else {
        console.log('One or Both  string contains number')
    }


}


const form = document.querySelector('.sign-form');

form.addEventListener('submit', checkdata);

<div class="form-area" id="forma">
    <form class="sign-form">
        <div class="form-container">
            <h1> Enter purchase data below : </h1>
            <label for "addrs" Address Name</label>
            <input type="text" placeholder="Enter address name " id="address" name="addr" required/>
            </label>
            <label for "regn" > Region </label>
            <input type="text" placeholder="Enter region " id="region" name="reg" required/>
            </label>
        </div>
        <button type="submit" class="continuebtn">Continue</button>
    </form>
</div>

score 0 · Answer 4 · answered May 16 '20 at 12:41

I would recommend going through the string and getting the ASCII value of each character. Numbers 0-9 are ASCII characters 48-57. Javascript uses UTF-16 and the appropriate method (charCodeAt) returns a 16-bit UTF-16 value, but UTF-16 characters 0-127 match ASCII. So:

var testString = "abcd123";
var isValid = true;

for (var i=0;i<testString.length;i++)
{
 if (testString.charCodeAt(i) > 47 && testString.charCodeAt(i) < 58)
 {
  isValid = false;
 }
}

if (!isValid)
{
 //Code here to alert the user
 alert("There's a number in there!");
}

score -1 · Answer 5 · answered May 16 '20 at 11:54

-1

You are using typeof in wrong way, try this way typeOf(variable you want to check)

answered May 16 '20 at 11:54

Zeeshan Awan

163
1
5
14

How can I check if a variable is a specific type using javascript?

5 Answers5