jQuery Click Function, input value length and pattern

Question

I have a problem, that I'm struggling with since 2 days. I have a webpage that asks for the phone number, and I'm trying to make a "validator" for the phone number into the input tab, but it seems that I cannot figure out how to check the minlength for the input tab, neither how to accept only numerical characters. Here's the code:

    $("#start").click(function(){ // click func
    if ($.trim($('#phonenr').val()) == ''){
     $("#error").show();

I tried adding:

     if ($.trim($('#phonenr').val()) == '') && ($.trim($('#phonenr').val().length) < 15)

But it just won't work. Any help would be appreciated. Also please tell me how can I make it allow only numbers?

Thank you!

Final code, with help of @Saumya Rastogi. $("#start").click(function(){

    var reg = /^\d+$/;
    var input_str = $('#phonenr').val();
   chopped_str = input_str.substring(0, input_str.length - 1);
   if(!reg.test(input_str)) {
    $("#error").show();
    return;
}
if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
  $("#error").show();
} else {

Answer 1

If you are using HTML5, then you can make use of the new number input type available

<input type="number" name="phone" min="10" max="10">

You can also use the pattern attribute to restrict the input to a specific Regular expression.

Answer 2

You can make your validation work.

You can use test (Regex Match Test) for accepting only digits in the input text. Just use javascript's substring to chop off the entered non-digit character like this:

$(function() {
 $('#btn').on('click',function(e) {
   var reg = /^\d+$/; // <------ regex for validatin the input should only be digits
    var input_str = $('#phonenr').val();
    chopped_str = input_str.substring(0, input_str.length - 1);
    if(!reg.test(input_str)) {
     $('label.error').show();
        return;
    }
    if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
      $('label.error').show();
    } else {
      $('label.error').hide();
    }
  });
})

label.error {
  display: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="phonenr" type="text" value=""><br>
<label class='error'>Invalid Number</label>
<br><br>
<button id="btn">Click to Validate</button>

Hope this helps!

Answer 3

If you are looking for the simplest way to check input against a pattern and display a message based on validity, then using regular expressions is what you want:

// Wait until the DOM has been fully parsed
window.addEventListener("DOMContentLoaded", function(){

  // Get DOM references:
  var theForm = document.querySelector("#frmTest");
  var thePhone = document.querySelector("#txtPhone");
  var btnSubmit = document.querySelector("#btnSubmit");
  
  // Hook into desired events. Here, we'll validate as text is inputted
  // into the text field, when the submit button is clicked and when the 
  // form is submitted
  theForm.addEventListener("submit", validate);
  btnSubmit.addEventListener("click", validate);
  thePhone.addEventListener("input", validate);
  
  // The simple validation function
  function validate(evt){
    var errorMessage = "Not a valid phone number!";
    
    // Just check the input against a regular expression
    // This one expects 10 digits in a row.
    // If the pattern is matched the form is allowed to submit,
    // if not, the error message appears and the form doesn't submit.
    !thePhone.value.match(/\d{3}\d{3}\d{4}/) ? 
      thePhone.nextElementSibling.textContent = errorMessage : thePhone.nextElementSibling.textContent = ""; 
      evt.preventDefault();
  }
 
});

span {
  background: #ff0;
}

<form id="frmTest" action="#" method="post">
  <input id="txtPhone" name="txtPhone"><span></span>
  <br>
  <input type="submit" id="btnSubmit">
</form>

Or, you can take more control of the process and use the pattern HTML5 attribute with a regular expression to validate the entry. Length and digits are checked simultaneously.

Then you can implement your own custom error message via the HTML5 Validation API with the setCustomValidity() method.

<form id="frmTest" action="#" method="post">
  <input type="tel" id="txtPhone" name="txtPhone" maxlength="20"
         placeholder="555-555-5555" title="555-555-5555"
         pattern="\d{3}-\d{3}-\d{4}" required>
  <input type="submit" id="btnSubmit">
</form> 

Stack Overflow's code snippet environment doesn't play well with forms, but a working Fiddle can be seen here.