CODEWITHSUNDEEP
javascript
itamar
itamar

Reputation: 1

using HTML variables with JavaScript

I'm creating a sign up system and tying to make a code using JavaScript that checks the phone number the user is entering and only allows it to be used if it is 10 characters long.

this is my code so far:

JavaScript:

<script type="text/javascript">
        function phoneIsValid()
        {
            var phoneL = document.getElementById("phone").length;
            if (phoneL != 10)
            {
                document.getElementById("phoneErr").innerHTML = "invalid phone number"
                return false;
            }
            else
            {
                document.getElementById("phoneErr").innerHTML = "";
                return true;
            }

        }
    </script>

HTML:

<input type="text" id="phone" name="phone" />
            <a id="phoneErr"></a>

the problem is that it always replys that the phone number is not 10 cahracters long, even if it is. what am I doing wrong? I dont know much Javascript and I cant find a solution on the internet.

Upvotes: -1

Views: 63

Answers (4)

Erhan &#199;apar
Erhan &#199;apar

Reputation: 173

Try getting the length of the "value".

var phoneL = document.getElementById("phone").value.length;
                                                ˄

Upvotes: 0

connexo
connexo

Reputation: 56744

You don't even need JS for this:

<form>
  <input type="text" minlength="10" maxlength="10" required placeholder="Phone number (10 digits)" />
  <button>Send</button>
</form>

Upvotes: 2

Alexey Zelenin
Alexey Zelenin

Reputation: 730

function phoneIsValid()
{
    var phoneL = document.getElementById("phone").value.length;
    if (phoneL != 10)
    {
        document.getElementById("phoneErr").innerHTML = "invalid phone number"
        return false;
    }
    else
    {
        document.getElementById("phoneErr").innerHTML = "";
        return true;
    }
}
function checkPhone() {
  if(phoneIsValid()) {
    alert('Phone number is valid');
  } else {
    alert('Phone number is NOT valid');
  }
}
<input type="text" id="phone" name="phone" />
            <a id="phoneErr"></a>
            
<button type="button" onclick="checkPhone()">Check it</button>

As mentioned in comments - you need to validate value of the textbox, not textbox itself.

Upvotes: 1

Cresct
Cresct

Reputation: 1

It'd be quite simple

HTML:
First create a submit button, so that we can detect when the user submits it

 <input type="text" id="phone" name="phone" placeholder='Enter Phone number..'/>
 <button id='submit'>Submit</button>

JavaScript:

  <script type="text/javascript">
  document.getElementById('submit').onclick = function(){ // trigger when button is clicked
    let phoneL = document.getElementById('phone').value.length; // get the length of the value
    if (phoneL >= 10) { //check if the length is 10 characters or more
      alert('Valid phone number!')
    } else {
      alert('Invalid phone number!')
    }
  }
    </script>

If you need any other help, feel free to let me know

Upvotes: 0

Related Questions