Develop Reference

Javascript How do I check that input value is neither empty or not a number?

I want to check if the value the user enter in one of my input. I want to check both that the value entered is neither an empty string or not a number. How do I do this, please?
const tempInput = parseInt(document.querySelector("#temp").value);
// this is my input
if (tempInput === '' || tempInput !== Nan){
code block
}
this is not working unfortunately!
Thanks!!

var theInput = document.getElementById("temp");
var regex = /(?:[A-Za-z].*?\d|\d.*?[A-Za-z])/;
theInput.addEventListener("keyup", function () {
if(theInput.value.length == 0){
console.log("Is empty");
} else if(!!theInput.value.match(regex)){
console.log("Both number and characters");
} else if(theInput.value.length > 0 && !isNaN(theInput.value)){
console.log("Number");
} else {
console.log("NOT a Number");
}
});
<input id="temp" type="text">

var value = document.getElementById("temp").value;
if(value.length > 0 && !isNaN(value))
{
//code
}

JavaScript Form Validation not working using isNaN

I have changed my code and added the isNaN to make sure a credit card validation is checking that only numbers are entered, however it broke the code.
Note this is only a code snippet of the broken code.
Tried adding backets and moving around code.
var american = document.getElementById("americanInput").value;
var master = document.getElementById("masterInput").value;
var visa = document.getElementById("visaInput").value;
var email = document.getElementById("email").value;
var errMsg = document.getElementById("errMsg");
var postcode = document.getElementById("billingPostcode").value;
var address = document.getElementById("billingAddress").value;
var suburb = document.getElementById("billingSuburb").value;
} else if (master.length > 0 && master.length !== 16 && isNaN(master)||
visa.length > 0 && visa.length !== 16 && isNaN(visa)||
american.length > 0 && american.length !== 15 && isNaN(american)){
errMsg.innerHTML = "Please check your card details again";
return false;
} else if (postcode.length < 4 || (!postcode.match(/^[0-9]*$/))) {
errMsg.innerHTML = "Please enter a valid postcode";
return false;
} else if (suburb.length < 8 || address.length < 8) {
errMsg.innerHTML = "Please check your address, to confirm details"
return false;
}
The code should validate and give an error message.

Try the below code. I have used 'OR' condition with isNaN instead of 'AND' condition. I assume you are checking for the credit card value is not null/undefined in your code. If not you need to check to make sure the below code works.
var american = document.getElementById("americanInput").value;
var master = document.getElementById("masterInput").value;
var visa = document.getElementById("visaInput").value;
var email = document.getElementById("email").value;
var errMsg = document.getElementById("errMsg");
var postcode = document.getElementById("billingPostcode").value;
var address = document.getElementById("billingAddress").value;
var suburb = document.getElementById("billingSuburb").value;
if ((master.length > 0 && (master.length !== 16 || isNaN(master))) ||
(visa.length > 0 && (visa.length !== 16 || isNaN(visa))) ||
(american.length > 0 && (american.length !== 15 || isNaN(american)))) {
alert("Please check your card details again");
return false;
} else if (postcode.length < 4 || (!postcode.match(/^[0-9]*$/))) {
alert("Please enter a valid postcode");
return false;
} else if (suburb.length < 8 || address.length < 8) {
alert("Please check your address, to confirm details");
return false;
}

Validation on textbox using jquery for pan Number format

I have to add Pan no in my website Application but i have to use jquery for validation so that first 5 no. should be alphabet then 4 no. should be numeric and the last Questions should be alphabet.
$('#txtPANNumber').keypress(function (event) {
var key = event.which;
var esc = (key == 127 || key == 8 || key == 0 || key == 46);
//alert(key);
//var nor = $("#txtPANNumber").mask("aaaaa9999a");
var regExp = /[a-zA-z]{5}\d{4}[a-zA-Z]{1}/;
var txtpan = $(this).val();
if (txtpan.length < 10 ) {
if( txtpan.match( regExp) ){
//event.preventDefault();
}
} else { event.preventDefault(); } });
Please provide some solutions

This will do
/[a-zA-z]{5}\d{4}[a-zA-Z]{1}/
Check here
Code
$('#txtPANNumber').change(function (event) {
var regExp = /[a-zA-z]{5}\d{4}[a-zA-Z]{1}/;
var txtpan = $(this).val();
if (txtpan.length == 10 ) {
if( txtpan.match(regExp) ){
alert('PAN match found');
}
else {
alert(Not a valid PAN number);
event.preventDefault();
}
}
else {
alert('Please enter 10 digits for a valid PAN number');
event.preventDefault();
}
});

You can use below regex to validate input for PAN.
[A-Z]{5}[0-9]{4}[A-Z]{1}
Function for JS :
function validatePAN(pan){
var regex = /[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
return regex.test(pan);
}
But don't rely only on JS validation, as JS validation can easily disabled from client side. Put a check on server side as well for inputs.
Also you need to change your if condition to something like below :
if(length == 10)

Decimal validation using javascript not working as expected

Hi all I have written a script to allow only decimal in textbox
function onlyDecimal(evt) {
if (!(evt.keyCode == 46 || (evt.keyCode >= 48 && evt.keyCode <= 57)))
return false;
var parts = evt.srcElement.value.split('.');
if (parts.length > 2)
return false;
if (evt.keyCode == 46)
return (parts.length == 1);
if (parts[0].length >= 15)
return false;
if (parts[1].length >= 3)
return false;
}
<asp:TextBox ID="txtDecimal" runat="server" OnKeyPress="return onlyDecimal(event)" />
This is only allowing the following inputs
1.000
12.000
123.123
But I would like to restrict the following after decimal only 3 digits before decimal it can accept up to 15 digits so can some one help me like the following 1234.123,12345.123 and so on
Also If I enter 12.123 and trying to edit the decimal part it is not allowing me to edit the value until I clear that value

You can add "FilterNumber" class in the textbox and implement jquery to achieve your functionality
<asp:TextBox ID="txtDecimal" CssClass="FilterNumber" runat="server" />
$(".FilterNumber").live("keypress", function (e) {
var caretPosition = doGetCaretPosition(this);
var code = (code ? code : e.which);
//if it is delete,navigation keys always allow
if (code == 0 || code == 8)
return true;
var Value = $(this).val();
if (Value.indexOf('.') != -1) {
var splt = Value.split('.');
var indexofDot = Value.indexOf('.');
if (caretPosition > indexofDot) {
//allow only three character after .
if (splt[1].length > 2) {
return false;
}
}
else {
//allow only fifteen character before .
if (splt[0].length > 14) {
return false;
}
}
}
if (code != 46 && code > 31 && (code < 48 || code > 57))
return false;
//if it is (.)
else if (code == 46) {
var Value = $(this).val();
//if value already contains (.) character
if (Value.indexOf('.') != -1) {
var splt = Value.split('.');
//if there is already(.) char then return false
if (splt.length >= 2)
return false;
}
}
return true;
});
You need the caret position on the textbox so that you can know whether the use is entering the numbers before . or after .
function doGetCaretPosition(oField) {
// Initialize
var iCaretPos = 0;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart('character', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCaretPos = oField.selectionStart;
// Return results
return (iCaretPos);
}

Smart input with jQuery mask

I want to create a smart input field for phone numbers with the jQuery mask plugin.
If the focus is in the input and index #4 value = 91 input, show
$("#phone").mask("+97(912)1234567");
and if 0912 back in to 912 and remove 0 from the mask in realtime
My code:
var smart_input = setInterval(function () {
var phone = $('#phone').val();
var phone_element = $('#phone');
if (phone.indexOf('09') == 0 && phone.length != 0) {
var prefix = phone.substring(1);
$('#phone').mask('(999) 999 9999');
phone_element.val(prefix);
} else if (phone.indexOf('91') == 0 && phone.length != 0) {
var prefix = phone.substring(1);
$('#phone').mask('(999) 999 9999');
phone_element.val(prefix);
}
}, 1);

In same scenario I took this as a reference . Please try