I have these input-boxes which I did some controls on them using jQuery. If the inserted number is longer than 3 digits it will add space to them on blur, and after re-entering to the input-box (focus) it will delete the spaces. These two functions work fine !
The problem is that when I want to send these data (click over Check Me button), due to the fact that on blur I added spaces to them, these entries are not considered as number (isNaN).

I want a solution to check these data (without changing them on the page), by using the same function on focus (included in my codes), in order to check them correctly and not getting error because of the spaces.
$(function() {
$('.ndInbox').blur(function() {
try {
// Get your formatted number
var formatted = Number($(this).val().replace(/\s/g, '')).toFixed(2);
if (isNaN(formatted) || $(this).val() == "") {
return;
}
// Split off any decimal value (there should be one)
var sections = formatted.split('.');
// Replace every third digit with a space
sections[0] = sections[0].replace(/\B(?=(\d{3})+\b)/g, " ");
// Output the updated and rejoined sections
$(this).val(sections.join('.'));
} catch (err) {
alert(err);
}
});
$('.ndInbox').focus(function() {
if ($(this).val() != "") {
var formatted = Number($(this).val().replace(/\s/g, '')).toFixed(2);
if (isNaN(formatted)) {
return;
}
$(this).val(formatted);
}
});
});
$(document).ready(function() {
$('#btn').click(function() {
/*
//it should happen here !!!
$('.ndInbox').DontKnowWhat(function() {
if ($(this).val() != "") {
var formatted = Number($(this).val().replace(/\s/g, '')).toFixed(2);
if (isNaN(formatted)) {
return;
}
$(this).val(formatted); // this one should not be displayed in page
}
});
// till here
*/
$("#avPurchase01").removeClass("ndLabelRed");
$("#avPurchase02").removeClass("ndLabelRed");
$("#avPurchase03").removeClass("ndLabelRed");
if (isNaN($('#lpcfIn02Id').val())) {
$("#avPurchase01").addClass("ndLabelRed");
}
if (isNaN($('#lpcfIn0sd').val())) {
$("#avPurchase02").addClass("ndLabelRed");
}
if (isNaN($('#lpcfIn0232').val())) {
$("#avPurchase03").addClass("ndLabelRed");
}
});
});
.ndInbox {
background-color: white;
width: 390px;
height: 42px;
box-shadow: 0 2px 2px 0 #C2C2C2;
border: none;
outline: none;
font-size: 18px;
margin-bottom: 10px;
font-family: 'PT Sans', sans-serif;
padding-left: 10px;
}
.ndLabel {
color: #999;
font-size: 17px;
font-family: 'PT Sans', sans-serif;
}
.ndLabelRed {
color: red;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table>
<tr>
<td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase01">Average, €:</td>
<td colspan="2">
<input id="lpcfIn02Id" class="ndInbox" type="text" value="" />
</td>
</tr>
<tr>
<td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase02">Budget, €:</td>
<td colspan="2">
<input id="lpcfIn0sd" class="ndInbox" type="text" value="" />
</td>
</tr>
<tr>
<td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase03">Salary, €:</td>
<td colspan="2">
<input id="lpcfIn0232" class="ndInbox" type="text" value="" />
</td>
</tr>
</table>
<button id="btn">
Check ME
</button>
jsFiddle Link
You can create plugin that will return number:
$.fn.number = function() {
if ($(this).val() != "") {
return Number($(this).val().replace(/\s/g, '')).toFixed(2);
}
};
and use it like this:
if (isNaN($('#lpcfIn02Id').number())) {
$("#avPurchase01").addClass("ndLabelRed");
}
if (isNaN($('#lpcfIn0sd').number())) {
$("#avPurchase02").addClass("ndLabelRed");
}
if (isNaN($('#lpcfIn0232').number())) {
$("#avPurchase03").addClass("ndLabelRed");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With