javascript - How to check if masked input field is empty - Stack Overflow

admin管理员组

文章数量:1291143

I am using this masked input plugin and I would like to check when the field is empty. Below is what I have tried but it does not seem to work:

HTML

<input type="text" name="phone" id="phoneid" />

Le JavaScript:

$("#phoneid").mask("999-999-9999");

This code does not work

            $("#phoneid").keyup(function(){
                if($("#phoneid").val().length == 0){
                    alert(111);
                }
            });

I am using this masked input plugin and I would like to check when the field is empty. Below is what I have tried but it does not seem to work:

HTML

<input type="text" name="phone" id="phoneid" />

Le JavaScript:

$("#phoneid").mask("999-999-9999");

This code does not work

            $("#phoneid").keyup(function(){
                if($("#phoneid").val().length == 0){
                    alert(111);
                }
            });

• javascript
• html
• livevalidation

Share Improve this question Follow edited Jan 6, 2016 at 19:09 mpora asked Jan 6, 2016 at 19:04 mporampora 1,47955 gold badges2626 silver badges6767 bronze badges 2

• 1 Is the id "phoneid" or "Momphone"? – Pointy Commented Jan 6, 2016 at 19:05
• It should be phoneid. I have corrected the code. – mpora Commented Jan 6, 2016 at 19:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The masking plugin that you're using alters the value of the input element.

When the element is empty, it has a value of ___-___-____.

You could simply strip out the _/- characters when checking the length of the value:

$("#phoneid").on('keyup', function() {
  if (this.value.replace(/[_-]/g, '').length === 0) {
    alert('Empty');
  }
});

Alternatively, you could also check if the value only contains the _/- characters:

$("#phoneid").on('keyup', function() {
  if (/^[_-]+$/.test(this.value)) {
    alert('Empty');
  }
});

we can fetch the kind of unmasked value by again masking it with "9999999999" i.e. without dash and then pare like follows:

$(document).ready(function(){
  $("#phoneid").mask("999-999-9999");
  
  $("#phoneid").keyup(function(){
     if($("#phoneid").mask("9999999999").val().length == 0){
         alert(111);
     }
     $("#phoneid").mask("999-999-9999");
   });
  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="https://raw.githubusercontent./digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>

<input type="text" name="phone" id="phoneid" />
<button id="test">Test</button>

Simple solution for me. This code is for checking all inputs including masked: inputs.val() == ""

.on('blur', '.form__input', function(e) {
    var inputs = $(this).find('input,textarea,select');
    setTimeout(function(){
        if (inputs.val().length == 0 || inputs.val() == ""){
            alert('Empty');
        }
    },100);
});

Look at my Codepen: https://codepen.io/ngocquydhtn/pen/YzwVMKR

    $(document).ready(function() {
var phoneMask = IMask(
  document.getElementById('phoneid'),
  {
    mask: '0000-000-000',
    lazy: false, 
    placeholderChar: '_'
  })
$("#phoneid").keyup(function(){
  if(this.value.replace(/[_-]/g, '').length==10){
    $(".btn").removeAttr('disabled');
  }
  else{
    $(".btn").attr('disabled','true');
  }
})
});

本文标签： javascriptHow to check if masked input field is emptyStack Overflow