Develop Reference

HTML input field number 0-100 validation with javascript / jquery

I have a question about an input field which should only accept numbers with two digits after the dot. For this scenario I created a fully functional Fiddle example - where you can see where I am stuck right now.
My issue: I can't change the value when it's completely selected/marked.
Fiddle Example of my issue
The scripts check for:
only positive numbers
only numbers between 0 - 100
only two digits after .
only one . (dot) possible
copy&paste check implementation
// Check if keypressed and only number & .
$('#inpPercent').keypress(function(event) {
var inpVal = $(this).val();
if ((inpVal.indexOf('.') != -1) && (inpVal.substring(inpVal.indexOf('.')).length > 2)) {
event.preventDefault();
return false;
}
if (isNumberRegChecked(event, this) == false) {
event.preventDefault();
return false;
}
return isNumber(event, this)
});
// CHANGE VALID FEEDBACK OF INPUT FIELD
$('#inpPercent').on('input', function(e) {
var inpVal = $(this).val();
if (inpVal > 100 || inpVal < 0 || !inpVal) {
$("#inpPercent").removeClass("is-valid");
$("#inpPercent").addClass("is-invalid");
return false;
} else {
$("#inpPercent").removeClass("is-invalid");
$("#inpPercent").addClass("is-valid");
return true;
}
});
// PREVENT COPY PASTE
$('#inpPercent').bind("paste", function(e) {
var text = e.originalEvent.clipboardData.getData('Text');
if ($.isNumeric(text)) {
if (text > 100 || text < 0) {
$("#inpPercent").addClass("is-invalid");
} else {
$("#inpPercent").addClass("is-valid");
}
if ((text.substring(text.indexOf('.')).length > 3) && (text.indexOf('.') > -1)) {
e.preventDefault();
$(this).val(text.substring(0, text.indexOf('.') + 3));
}
} else {
e.preventDefault();
}
});
function isNumberRegChecked(evt, element) {
var inpVal = $(element).val();
var checkValue = /^(\d{0,2}(\.\d{0,2})?)$/.test(inpVal);
if (checkValue == false) return false;
return true;
};
// THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE.
function isNumber(evt, element) {
var charCode = evt.which ? evt.which : event.keyCode;
if (
(charCode != 46 ||
$(element)
.val()
.indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode < 48 || charCode > 57)
)
return false;
return true;
};

Changing input fields

I got a situation in which, I am validating input type using jquery.
I have html drop down list which contains different parameters("select:first-child").
I am trying validating input box based on these parameters for this I have written following code in jquery.
For example-
If I select "Quantity" then input box should take only numbers.
If I select "TradeDate" then input box should take date.
Now problem is ,when I select parameter which has type date , datepicker appears to select date.
But when I select any other parameter having type numbers ,input still showing datepicker.
So, Where I am wrong ,I want each time this validation
Here var type[1] contains type of parameter eg. float,date,char etc.
$("#cond_div").children("select:first-child").change(function(event){
var temp = $(this).val();
var type = temp.split("_");
$("#cond_div").children("input").on("keypress keyup", function () {
if (type[1].localeCompare("date") == 0) {
$(this).datepicker();
}
else if (type[1].localeCompare("float") == 0) {
$(this).val($(this).val().replace(/[^0-9\.]/g, ''));
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
}
else if (type[1].localeCompare("int") == 0) {
$(this).val($(this).val().replace(/[^0-9\.]/g, ''));
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
}
});
});

Once you've transformed an input with the .datepicker() creator, it stays that way until you destroy it by calling .datepicker("destroy") function.

SOLVED...
Instead of going with tricky logic ,found a simple way
$(document).ready(function () {
$("#cond_div").children("select:first-child").change(function (event) {
var temp = $(this).val();
var type = temp.split("_");
console.log("->" + temp);
console.log("->" + type);
$("#cond_div").children("input").val("");
$("#cond_div").children("input").datepicker("destroy");
if (type[1].localeCompare("date") === 0) {
console.log(type[1]);
$("#cond_div").children("input").datepicker();
} else if (type[1].localeCompare("char") === 0) {
console.log(type[1]);
$("#cond_div").children("input").attr("type", "text");
} else if (type[1].localeCompare("float") === 0) {
console.log(type[1]);
$("#cond_div").children("input").attr("type", "number");
} else if (type[1].localeCompare("int") === 0) {
console.log(type[1]);
$("#cond_div").children("input").attr("type", "number");
}
});
});

Call to a java script function Regular Expression Validator to fail In asp.Net

I have a <asp:RegularExpressionValidator> that validates a text box but i also have a javascript function that prevents entering of non numerical values in the textbox. when use the expression validator it works fine but as soon as i add onkeydown="return jsDecimals(event);" to the text box to call the jsDecimals() function the validator doesn't work. What am I doing wrong??
asp Code
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" CausesValidation="true" MaxLength="13" onkeydown="return jsDecimals(event);"></asp:TextBox>
<asp:Button ID="Button5" runat="server" Text="Retrieve" CssClass="btn btn-default" OnClick="Button5_Click"/>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" CssClass="tooltip-arrow"
ErrorMessage="ID must be 13 Numeric characters" ControlToValidate="TextBox2" ValidationExpression="^[0-9]{13}$">
</asp:RegularExpressionValidator>
JavaScript:
function jsDecimals(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key != null) {
key = parseInt(key, 10);
if ((key < 48 || key > 57) && (key < 96 || key > 105)) {
if (!jsIsUserFriendlyChar(key, "Decimals")) {
return false;
}
}
else {
if (evt.shiftKey) {
return false;
}
}
}
return true;
function jsIsUserFriendlyChar(val, step) {
// Backspace, Tab, Enter, Insert, and Delete
if (val == 8 || val == 9 || val == 13 || val == 45 || val == 46) {
return true;
}
// Ctrl, Alt, CapsLock, Home, End, and Arrows
if ((val > 16 && val < 21) || (val > 34 && val < 41)) {
return true;
}
if (step == "Decimals") {
if (val == 190 || val == 110) { //Check dot key code should be allowed
return true;
}
}
// The rest
return false;
}

Your syntax is incorrect. Check my comment on your code below. You do not appear to be closing the function after return true; and you are ending up declaring the next function within the 1st one.
function jsDecimals(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key != null) {
key = parseInt(key, 10);
if ((key < 48 || key > 57) && (key < 96 || key > 105)) {
if (!jsIsUserFriendlyChar(key, "Decimals")) {
return false;
}
} else {
if (evt.shiftKey) {
return false;
}
}
}
return true; // <-- what's this? is there supposed to be a closing bracket after this line?
function jsIsUserFriendlyChar(val, step) {
.
.
.

Form Validation Jquery object

I am trying to format the phone number field based on the country .The logic works fine when the user fill in the details but does not work when the country is changed and filled in again.
Ex:
Filled in the form for Germany and then without reloading the page if try change county to US and fill in phone "+" is being added even though format for it is different.
$(document).ready(function($){
$('#country').on('change', function() {
if ( this.value == 'US' || this.value == 'CA')
{
$('#C_BusPhone')
.keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
$phone = $(this);
if (key !== 8 && key !== 9) {
if ($phone.val().length === 4) {
$phone.val($phone.val() + ')');
}
if ($phone.val().length === 5) {
$phone.val($phone.val() + ' ');
}
if ($phone.val().length === 9) {
$phone.val($phone.val() + '-');
}
}
return (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
.bind('focus click', function () {
$phone = $(this);
if ($phone.val().length === 0) {
$phone.val('(');
}
else {
var val = $phone.val();
$phone.val('').val(val);
}
})
.blur(function () {
$phone = $(this);
if ($phone.val() === '(') {
$phone.val('');
}
});
}
else
{
$('#C_BusPhone')
.keydown(function (e) {
if ($(this).val().indexOf("+") === -1) {
$(this).val("+" + $this.val());
}
})
}
});
});

Not sure if this was the cause for your error, but this line needs to get corrected from
$(this).val("+" + $this.val());
to this
$(this).val("+" + $(this).val());
It was a fast catch, just use your browser javascript console for debugging.
See the updated fiddle here. You might want to add the starting parenthesis to your international prefix as well.

jquery elastic textarea issue

i am using this plugin :http://www.unwrongest.com/projects/elastic/ and this is my code :
$(document).ready(function () {
$("#<%=Message_txt.ClientID %>").elastic();
var keyPressCount = 0;
$(window).keyup(function (e) {
if (keyPressCount++ % 10 == 0) {
chat.server.onuserTyping(ToClient, fromClient);
}
var enterkey = e.which == 13 || e.KeyCode == 13 || e.charCode == 13 ? true : false;
if (enterkey) {
var Msgtxt = $("#<%=Message_txt.ClientID %>").val().trim();
if (Msgtxt == null) return false;
$("#<%=Send_btn.ClientID %>").trigger("click");
}
});
});
as you can see when the enter key is pressed i am triggering the send_btn click the problem is after the button is triggered the textarea loose the elastic functionality and i don't know why