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);
}
});
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" ie without dash and then compare 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.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/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');
}
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.