I have implemented jQuery International Telephone Input but the issue now is, when i select the country, the prefix code doesn't show. How can i achieve this please ?
View
<div class="form-group">
<label for="eventRegInput2">Phone Number</label>
<input type="tel" id="phone" class="form-control square" placeholder="" value="{{ old('phone') }}"name="phone" required>
</div>
JS code responsible for displaying the prefix of the country selected.
JS
// get the input val, adding the dial code if separateDialCode is enabled
_getFullNumber: function() {
var val = $.trim(this.telInput.val()), dialCode = this.selectedCountryData.dialCode, prefix, numericVal = this._getNumeric(val), // normalized means ensure starts with a 1, so we can match against the full dial code
normalizedVal = numericVal.charAt(0) == "1" ? numericVal : "1" + numericVal;
if (this.options.separateDialCode) {
prefix = "+" + dialCode;
} else if (val.charAt(0) != "+" && val.charAt(0) != "1" && dialCode && dialCode.charAt(0) == "1" && dialCode.length == 4 && dialCode != normalizedVal.substr(0, 4)) {
// if the user has entered a national NANP number, then ensure it includes the full dial code / area code
prefix = dialCode.substr(1);
} else {
prefix = "";
}
return prefix + val;
},
How can I achieve this please?
Assuming that your function is working (that format properly input text with area code, all you have to do is when user leave textbox you can call your function to format number. This snippet need also to check if user has input something in textbox and if it is a valid code. Apart from that this is the way to ensure that your format function run everytime user leaves textbox and update its value with output from your function.
$('#phone').on('blur', function() {
var value = $(this).val();
if(value) {
$(this).val(_getFullNumber());
}
});
Related
I am trying to get a true/false using .includes(".") on an input type of number.
In my snippet I am always getting that the value is always false in looking to see if the value does NOT have a decimal. Meaning a number like "2" AND "2." are bring back the same result. When the "2." should fall into the ELSE because it does contain a decimal.
If I turn the input type to "text" all works as expected, but when I turn the type into a number, the .includes(".") does not see the input value as having a decimal.
Should be simple, but I have not been able to get past it. I like using the "number" input for built in browser limitations of number only input.
So I have something like this:
var e = document.getElementById("numberBox");
$('#submitBtn').prop('disabled', true);
$(e).on("keyup", function(){
var newValue = this.value;
checkIt(newValue);
});
function checkIt(newValue){
if(newValue >= 1 && !newValue.includes(".")){
//if entering "2." this should not fire, but does if input type is number.
$('#submitBtn').attr('disabled', false);
console.log("TRUE: value does not include a decimal. Value is:" + newValue + ", value type is: " + typeof newValue);
}else{
$('#submitBtn').attr('disabled', true);
console.log("FALSE: value includes a decimal. Value is: " + newValue + ", value type is: " + typeof newValue);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="number" id="numberBox" value=""/>
<input id="submitBtn" type="submit" value="Submit">
The issue that you'll face with input type="number" is that it only allows valid numbers, so if the user were to enter 2., which you and I know is invalid, the control would see that as just 2 which is valid. includes would never pick up the ..
document.querySelector("input").addEventListener("input", function(){
console.log(this.value); // 2 not 2.1
});
Type 2. and watch the console output <input type="number">
To get the behavior you want, you'll need to use a regular text input, and check for bad characters on keydown and validate the input on keyup.
let input = document.querySelector("input");
input.addEventListener("keydown", function(evt){
// prevent non-numeric chars, but allow BACKSPACE and DELETE
let nums = /^\d+|\./g;
let valid = nums.test(evt.key);
// If the input is not valid, backspace, delete or the left/right arrow keys....
if(!valid && evt.code != "Backspace" && evt.code != "Delete" &&
evt.code != "ArrowLeft" && evt.code != "ArrowRight"){
evt.preventDefault();
}
});
input.addEventListener("keyup", function(evt){
let reg = /^(-?\d+\.\d+)$|^(-?\d+)$/gm; // RegExp to test for valid nummber
let valid = reg.test(input.value); // Test the input
input.setCustomValidity(valid ? "" : "Invalid!"); // Set validity
});
input:invalid { border:2px solid red; }
input:valid { border:2px solid green; }
<input>
You could take your input from your DOM, convert it to a string, perform the decimal includes comparison, and convert it back to a float or integer depending on the results of the comparison.
EDIT:
Understood the question clearly.
I'm trying to automatically convert a phone number typed in an input box to (xxx) xxx-xxxx format where x is the phone number someone types in. I can actually get it working when the input box loses focus but I'm trying to also change it once the 10th character is typed in the input. It's working but not until you click the 11th character and I cannot figure out why.
<input type="tel" class='tel' placeholder="(555) 555-1212" maxlength=10>
<div class="result"></div>
var convert_phone = function () {
var phone_num = $('.tel').val();
var phone_check = phone_num.search(/^\(?\d{3}\D*\d{3}\D*\d{4}$/);
if (phone_check == 0) {
var parts = phone_num.match(/^\(?(\d{3})\D*(\d{3})\D*(\d{4})$/);
$('.tel').val('('+parts[1]+') '+parts[2]+'-'+parts[3]);
}
}
$('.tel').on('keypress', function () {
var current_val = $(this).val().length;
$('.result').text(current_val);
if (current_val == 10) {
convert_phone();
}
})
$('.tel').on('blur', function() {
convert_phone();
})
JSFiddle: https://jsfiddle.net/s6frnp2k/3/
The result div is just there to show click value and isn't needed for the final version.
I am trying to build a numeric input widget using Kendo UI. I am able to set the format so that trailing zeros are not truncated when the field does not have focus, but when the field does have focus, the trailing zeros disappear.
I have an example at http://dojo.telerik.com/eBevU and the relevant bits are listed below:
<div id="add-product" class="demo-section k-content">
<ul id="fieldlist">
<li>
<label for="numeric">Input</label>
<input id="numeric" type="number" value="17" min="0" max="100" step="1" style="width: 100%;" />
</li>
</ul>
</div>
<script>
$(document).ready(function() {
// create NumericTextBox from input HTML element
$("#numeric").kendoNumericTextBox({
format: "n5",
decimals: 5
});
});
</script>
This example shows "17.00000" in the input box before it has focus, and "17" after.
The only solution I found is to basically reconstruct the value using the format specified in the widget configuration i.e. adding the decimal separator (if needed) and the missing trailing zeros. Bind the function below to the focus event of the input.
function () {
var input = $(this);
var widget = input.data("kendoNumericTextBox");
setTimeout(function () {
if (widget !== undefined && input.val() !== "") {
var format = widget._format(widget.options.format);
var decimals = widget.options.decimals;
if (decimals > 0) {
var inputValue = input.val();
var digits = inputValue.split(format["."]);
if (digits.length == 1)
inputValue = inputValue + format["."];
var l = digits[0].length + 1 + decimals;
while (inputValue.length < l)
inputValue = inputValue + "0";
input.val(inputValue);
}
}
}
}
You can find here your example modified.
The only way (that I have experienced) kendo will retain the decimal places when focused is if the number already has a value with the specified precision, otherwise it removes them. You could try and modify the step so that the user can increase the value by smaller amounts.
$("#numeric").kendoNumericTextBox({
format: "n5",
decimals: 5,
step: 0.00001
});
Good luck.
I have:
$('#pass').on('keyup keydown', function() { //the password input
$('#pass-result').text( $(this).val() ); //the input's bullet's, not string value
});
The text value of the password is printed as the input's string. How do I convert it to the password's masqueraded bullet form (•)?
If you're looking for dots to appear in the field when text is typed in it, you should use <input type="password"> instead of <input type="text">:
<input type="password" id="pass" />
which you would get the text from with $("pass").val().
It looks like you want a string of dots instead. To accomplish this, use:
var dots = Array($("pass").val().length + 1).join("•");
To explain:
$("pass").val() gets the text
$("pass").val().length gets the length of that
Array($("pass").val().length + 1) gets a new Array whose length is 1 more than the length of the password text
Array($("pass").val().length + 1).join("•") returns each element of the Array with a dot inserted between each - which is why we needed 1 extra, otherwise we would get a fencepost error.
According to the fact that you only want to parse a string of dots . what you gonna do is (IF YOU USE 2 INPUTS!)
function getKeyCode(event) {
event = event || window.event;
return event.keyCode;
}
$('#pass').on('keyup', function(e) { //the password input
if (getKeyCode(e) == 8) {
$('#pass-result').val($('#pass-result').val().slice(0,-1) );
}
else {
$('#pass-result').val($('#pass-result').val() + '•');
}
});
didnt test the code though. but it should add a • to the #pass-result on ever key-down in the #pass field. it doesnt remove any on backspace though..
http://jsfiddle.net/7810squo/
if you wanna do it with a <span> you need to use .html()
function getKeyCode(event) {
event = event || window.event;
return event.keyCode;
}
$('#pass').on('keyup', function(e) { //the password input
if (getKeyCode(e) == 8) {
$('#pass-result').html($('#pass-result').html().slice(0,-1) );
}
else {
$('#pass-result').html($('#pass-result').html() + '•');
}
});
http://jsfiddle.net/u9kdeewd/
EDIT: updated code and provided jsFiddle link
I have an input field that I am monitoring for changes using an .on('input') function as this covers .change and .keyup.
There is no submit button yet I just want to change the behaviour of the input field depending on what is entered.
I will validate server side later and I'm using html5 type='number'.
I only want the field to be able to hold a number, or it can be empty. The user might want to empty the contents to type the number 15 for example.
However I don't want any other characters to be accepted - if they are entered, a prompt should show notifying the user of this and the field is defaulted back to it's starting value of 1.
HTML
<input type="number" class="input-field" placeholder="" value="1" min="1">
JS
$(document).ready(function ($) {
var num = $('input[type="number"]').val();
$('input[type="number"]').on('input', function () {
var num = $(this).val();
if (num < 1 || isNaN(num) || num !== '') {
alert(num + ' is not a number or is less than 1');
$(this).val(1);
}
});
});
I have tried with the above code and it doesn't allow for an empty field. I've also tried if (num < 1 || isNAN(num) || num.length != 0) {
do I need to use .replace() with a Regexr. I've been looking at a few questions on here like here but I'm not sure thats what I'm looking for considering I'm testing for an empty string.
JSFIDDLE
You can use the constraint validation API:
$('input[type="number"]').on('input', function () {
if (!this.validity.valid) {
alert(this.value + ' is not a number or is less than 1');
this.value = 1;
}
});
$('input[type="number"]').on('input', function () {
if (!this.validity.valid) {
alert(this.value + ' is not a number or is less than 1');
this.value = 1;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" class="input-field" placeholder="" value="1" min="1">
However, note that this behavior is obtrusive. If an user types the wrong key, you will annoy him with a modal dialog and will clear the number.
Consider doing nothing. HTML5 browsers won't send the form if the input is not valid.
The HTML5 answer is definitely more elegant.
But if you want to offer more support, this is usually the route I take when trying to verify numbers.
Note that I am using data-min attribute but if you want to switch you can always use $.attr() to grab your min="" attribute.
$(document).ready(function ($) {
$('input[type="number"]').on('change', function () {
var min = parseInt(this.dataset.min),
num = isNaN(parseInt(this.value)) ? 0 : parseInt(this.value),
clamped = Math.max(num, min);
if(num != clamped) {
alert(num + ' is less than 1');
this.value = clamped;
}
});
});
jsfiddle