We Keep Coding

How to Apply Regex Validation to a textbox in JQuery to enter only decimal(s),integer(s) numbers(if multiple comma seperated)

My HTML Code is
<input type="text" class="form-control textinput" id="Result" name="Result" value="#p.Result"/>
My JQuery Code is :
$(function () {
$(".textinput").keydown(function (e) {
var test = ^(\d?\d?\d(,\d\d\d)*|\d+)(\.\d\d)?$;
var value = String.fromCharCode(e.keyCode);
if (value.match(test)) {
return false;
}
});
});
I have reffered to This Question but it isn't working,showing an error so please help
My Sample Inputs will be as follows
1,245.30
24,235
135.60,12.6
235.50
34

Try this one: ^\d+((?=[\,\.])([\.\,]\d+|$))*$.

You can use the regex
^(?:\d+,)*\d+(?:\.\d+)?$
see the regex101 demo

jQuery Click Function, input value length and pattern

I have a problem, that I'm struggling with since 2 days.
I have a webpage that asks for the phone number, and I'm trying to make a "validator" for the phone number into the input tab, but it seems that I cannot figure out how to check the minlength for the input tab, neither how to accept only numerical characters. Here's the code:
$("#start").click(function(){ // click func
if ($.trim($('#phonenr').val()) == ''){
$("#error").show();
I tried adding:
if ($.trim($('#phonenr').val()) == '') && ($.trim($('#phonenr').val().length) < 15)
But it just won't work.
Any help would be appreciated. Also please tell me how can I make it allow only numbers?
Thank you!
Final code, with help of #Saumya Rastogi.
$("#start").click(function(){
var reg = /^\d+$/;
var input_str = $('#phonenr').val();
chopped_str = input_str.substring(0, input_str.length - 1);
if(!reg.test(input_str)) {
$("#error").show();
return;
}
if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
$("#error").show();
} else {

You can make your validation work.
You can use test (Regex Match Test) for accepting only digits in the input text. Just use javascript's substring to chop off the entered non-digit character like this:
$(function() {
$('#btn').on('click',function(e) {
var reg = /^\d+$/; // <------ regex for validatin the input should only be digits
var input_str = $('#phonenr').val();
chopped_str = input_str.substring(0, input_str.length - 1);
if(!reg.test(input_str)) {
$('label.error').show();
return;
}
if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
$('label.error').show();
} else {
$('label.error').hide();
}
});
})
label.error {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="phonenr" type="text" value=""><br>
<label class='error'>Invalid Number</label>
<br><br>
<button id="btn">Click to Validate</button>
Hope this helps!

If you are using HTML5, then you can make use of the new number input type available
<input type="number" name="phone" min="10" max="10">
You can also use the pattern attribute to restrict the input to a specific Regular expression.

If you are looking for the simplest way to check input against a pattern and display a message based on validity, then using regular expressions is what you want:
// Wait until the DOM has been fully parsed
window.addEventListener("DOMContentLoaded", function(){
// Get DOM references:
var theForm = document.querySelector("#frmTest");
var thePhone = document.querySelector("#txtPhone");
var btnSubmit = document.querySelector("#btnSubmit");
// Hook into desired events. Here, we'll validate as text is inputted
// into the text field, when the submit button is clicked and when the
// form is submitted
theForm.addEventListener("submit", validate);
btnSubmit.addEventListener("click", validate);
thePhone.addEventListener("input", validate);
// The simple validation function
function validate(evt){
var errorMessage = "Not a valid phone number!";
// Just check the input against a regular expression
// This one expects 10 digits in a row.
// If the pattern is matched the form is allowed to submit,
// if not, the error message appears and the form doesn't submit.
!thePhone.value.match(/\d{3}\d{3}\d{4}/) ?
thePhone.nextElementSibling.textContent = errorMessage : thePhone.nextElementSibling.textContent = "";
evt.preventDefault();
}
});
span {
background: #ff0;
}
<form id="frmTest" action="#" method="post">
<input id="txtPhone" name="txtPhone"><span></span>
<br>
<input type="submit" id="btnSubmit">
</form>
Or, you can take more control of the process and use the pattern HTML5 attribute with a regular expression to validate the entry. Length and digits are checked simultaneously.
Then you can implement your own custom error message via the HTML5 Validation API with the setCustomValidity() method.
<form id="frmTest" action="#" method="post">
<input type="tel" id="txtPhone" name="txtPhone" maxlength="20"
placeholder="555-555-5555" title="555-555-5555"
pattern="\d{3}-\d{3}-\d{4}" required>
<input type="submit" id="btnSubmit">
</form>
Stack Overflow's code snippet environment doesn't play well with forms, but a working Fiddle can be seen here.

getting data from input box in form using jquery

This is a form I have:
<h1>Word game!</h1>
<form id="joke-form">
<label>
Unscramble these letters to form a word:<Br>
<span class="scrambled">REYJUQ</span>
<br>
<input type="text" id = "userinput" size="10">
</label>
<button type="submit">Check</button>
</form>
And here is a jquery function I am running on it. My problem is that I don't know how to get the value that the user inputs in the textbox when they press submit. I am relatively new to jquery but have had no luck in researching this topic, including reading similar questions on this site.
<script>
$('#joke-form').on('submit', function(event) {
event.preventDefault();
var words = $('this input: first').val();
console.log(words);
});
if (words === "ANSWER") {
$('#result').text("You have the right answer");
}
else {
$('#result').text("Guess again!");
}
</script>

You have the code in the wrong place, and the selector you are using is incorrect for the input.
See this codepen on how this could work:
http://codepen.io/KempfCreative/pen/JGRzwm
$('#joke-form').on('submit', function(event) {
event.preventDefault();
var words = $('#joke-form #userinput').val();
console.log(words);
if (words === "ANSWER") {
$('#result').text("You have the right answer");
}
else {
$('#result').text("Guess again!");
}
});

Try:
var words = $('#userinput').val();

Your selector $('this input: first') is malformed. Since your input element has an id anyway, I would just select it by id instead. Also you will need to put your if else statement inside the submit function.
Here is a Live Demo of your code working in action:
$('#joke-form').on('submit', function(event) {
event.preventDefault();
var words = $('#userinput').val();
console.log(words);
if (words === "JQUERY") {
$('#result').text("You have the right answer");
} else {
$('#result').text("Guess again!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Word game!</h1>
<form id="joke-form">
<label>
Unscramble these letters to form a word:
<Br>
<span class="scrambled">REYJUQ</span>
<br>
<input type="text" id="userinput" size="10">
</label>
<button type="submit">Check</button>
</form>
<span id="result"></span>
JSFiddle Version: https://jsfiddle.net/6pd5z9kv/1/

I see many anwsers already but here is what you've done wrong
your code
var words = $('this input: first').val();
fixed
var words = $(this).find("input:first").val();
//use 'this' seprately, then you start input:first with " and finished with '
hopefully it will work for you, and about html I dont know if its copy/pase issue but remove blank space with id and =
your code
id = "userinput"
fixed
id="userinput"
Rest is just fine :)
Cheers

Uncaught ReferenceError: changePhone is not defined

I have some text inputs on my site for phone numbers. I want to keep all numbers in one format not some like 123-456-7890 and others 1234567890. I've tried writing a code to change this but it is giving me an error of Uncaught ReferenceError: changePhone is not defined.
Here is my code:
<input type="text" id="phone" onblur="changePhone(this.id)">
function changePhone(id){
$(id).text(function(i, number) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
return number;
});
}
When running validation my code checks out as valid so I am not understanding why it doesn't work.
On a side note: Is there a PHP solution to achieve this or is jquery my best option?
EDIT: Here is a fiddle of my code: http://jsfiddle.net/4uk9hhtc/

There are so many things wrong with this.
$(id) does not work because you need a # before ID. You are doing $('whateverID') should be $('#whateverID')
The .text()does not work because you are running on an input element.
Your fiddle is missing jquery, and the code should in <head>
http://jsfiddle.net/4uk9hhtc/13
function changePhone(id){
var number = $("#"+id).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
alert( number )
}
OR you could just use jquery and get rid of inline onclick like in the other answers

Here is something that actually works
$(function() {
$('#phone').on('blur', function(){
var val = ""+this.value;
this.value = val.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="phone" />
Pure JS with inline invocation
function changePhone(field) {
var val = ""+field.value;
field.value = val.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
}
<input type="text" id="phone" onblur="changePhone(this)"/>

Pure jQuery solution. Your fiddle isn't including jQuery by the way. I'm making assumptions that you know how to include jQuery correctly. You should be using val().
http://jsfiddle.net/2kLywwpu/1/
<input type="text" class="phone" id="theText">
using
var textbox = $('#theText').on('blur', function(){
textbox.val(function(i, number) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
return number;
});
});
Here's a fiddle that's not using your regular expression so you can see that the basic functionality works.
http://jsfiddle.net/2kLywwpu/2/

Generating search links using text input in javascript

Im trying to make a website which makes searches easy for me.
I want to be able to write any text in a text box, and make a java script generate the appropriate links.
Ive been trying this:
function prepare_link() {
var url_param = document.getElementById('url_param');
var target_link = document.getElementById('target_link');
if ( ! url_param.value ) {
return false;
}
target_link.href = target_link.href + escape(url_param.value);
}
<input type="text" name="url_param" id="url_param" onkeypress='prepare_link()' onKeyUp='prepare_link()' />
<input type="button" onclick="prepare_link();" value="Generate" /><br>
Google<br>
Bing
For some reason the search string is repeated, but i would like it to update links for each keypress and not just when i hit the generate button.
Moreover the second links isn't being updated :(
Any ideas? :)

Please have a look of the following code snippet, hope this will help to resolve your Issue.
In the following snippet you will not get the repeated values. Also, it will work with 'keyup' and 'click' event :
var google = "https://www.google.dk/search?q=";
function prepare_link() {
var target_link = document.getElementById('target_link');
target_link.href = google + escape(url_param.value);
alert(target_link.href);
}
void function () {
document.addEventListener("keyup", function(e) {
prepare_link();
e.preventDefault();
});
var click = document.getElementById("target_link");
click.addEventListener("click", function() {
document.dispatchEvent(keyEvent);
});
}();
<input type="text" name="url_param" id="url_param" value=""/>
<input type="button" value="Generate" onclick="prepare_link();" /><br>
Google<br>
Thanks :)