How to display message with the help of jquery? - javascript

i m trying to do a validation using jquery.
Enter Account no:
here is my html code
<input type="text" name="Assets" id="Assets" size="25" /><br />
<div id="eb"> Please Enter Valid Account no </div>
Enter Amount<input type="text" name="Liability" id="Liability" size="25" /><br />
and here is my jquery code
$(document).ready(function(){
$("#Assets").change(function(){
var Assets = $('input#Assets').val();
var expression=/[0-9]{4}\s[0-9]{4}\s[0-9]{2}\s[0-9]{10}/;
if (Assets == "" || Assets == " ") {
$('#eb').show();
}
else if(Assets.test(expression)){
$('#eb').hide();
}
$('#eb').toggle();
}
i want to display a mesage when user write a account no then at a time he can see the message that Please Enter Valid Account no and if he insert correct then that message can be hide.
here is my jsfiddle - http://jsfiddle.net/BzdfN/5/
please help

Try this code:
$(document).ready(function () {
$("#Assets").change(function () {
var Assets = this.value;
var expression = /[0-9]{4}\s[0-9]{4}\s[0-9]{2}\s[0-9]{10}/;
if (Assets.match(expression)) {
$('#eb').hide();
} else {
$('#eb').show();
}
});
});
This is a suggestion for more simple code. Notice I used match() which takes a regex as paramenter, if you want to use test() you should use the value/string as paramenter and use like expression.test(Assets).
Fiddle
About your code/fiddle:
you missed adding jQuery library to the fiddle
you missed ) closing the change() function
you missed }) closing the ready() function
you used test() with wrong order, check my text above about match() and test()
your fiddle with corrections: Fiddle

jQuery was not included and multiple syntax errors
$(document).ready(function () {
var expression = /[0-9]{4}\s[0-9]{4}\s[0-9]{2}\s[0-9]{10}/;
$("#Assets").change(function () {
$('#eb').toggle(!expression.test(this.value));
})
})//missing brackets
Demo: Fiddle

Try this - http://jsfiddle.net/dangoodspeed/BzdfN/9/ I made a bunch of changes, including activating jQuery, closing some functions, and reversed Assets and expression for the .test call
else if(expression.test(Assets)){

Related

JQuery Not Triggering On Button.click

I've written some code that should check a textbox (ID tfa_1) to see if its empty or contains text, this should trigger on a next page button (wfpagenextID6) being clicked.
I've tried replacing my script with an alert("test.") and it dosent appear, so im assuming I have my trigger wrong but I cannot work out what I have done wrong!
My HTML that defines the textbox is below:
<input type="text" id="tfa_2685" name="tfa_2685" value="" placeholder="" title="Previous Surname (if applicable) " class="">
and the button is
<input value="Next Page" type="button" class="wfPageNextButton" wfpageindex_activate="7" id="wfPageNextId6" style="visibility: visible;">
Both of these are generated and I cannot change them!
My Script is:
<script>
$(document).ready(function(){
$('#wfPageNextId6').click(function(){
var inp.Val= $("#tfa_2685").val();
if (inp.val().length > 0) {
alert("Test.");
}
});
})
</script>
An identifier ( variable ) must not contains dots. ( see more details ECMAScript specification in section 7.6 Identifier Names and Identifiers)
the next variable declaration is wrong
var inp.Val= $("#tfa_2685").val();
to fix this
var inp = $("#tfa_2685");
if you want to assign value to inp variable, you should just do: var inp = $("#tfa_2685").val();
And then call to inp.val() just replace with inp, for inp is not jQuery object so it doesn't have val() method
You have syntax, try this:
$(document).ready(function(){
$('#wfPageNextId6').click(function(){
var inpVal= $("#tfa_2685").val();
if (inpVal.length > 0) {
alert("Test.");
}
});
});
https://jsfiddle.net/cua40s80/

Setting custom HTML5 validity message property ignores pattern regex

I'm using the pattern attribute in an HTML5 input. It works fine, until I add a custom message using setCustomValidity. All this is supposed to do is
Sets the validationMessage property of an input element.
But instead my pattern is ignored. If I comment out the setCustomValidity, the pattern works.
HTML
<form>Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
JS
$('input').get(0).setCustomValidity("It's wrong");
$('input').on('input', function () {
console.log($(this).prop('validity'));
var valid = $(this).get(0).checkValidity();
console.log(valid); });
http://jsfiddle.net/hrtsz50s/
use reportValidity(); insted of checkValidity(); and when you call the function clear the validity with an empty string first!
$('input').get(0).setCustomValidity("It's wrong");
$('input').on('input', function () {
this.setCustomValidity('');//Add this!!
console.log($(this).prop('validity'));
var valid = $(this).get(0).reportValidity();//here
console.log(valid); });
edit
Got it working in this fiddle: http://jsfiddle.net/hrtsz50s/1/

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/

How to clear a text field?

I want to place a cross button next to a text field, which, on clicking it, clears the value entered by the user. In other words, it empties the field. Please help..
And I also want to focus the field, but after some 2 or 3 seconds..
Like this:
$('#myButton').click( function () {
$('#myField').val('');
});
Or without jQuery
document.getElementById('myButton').onclick = function () {
document.getElementById('myField').value = '';
});
Try this,
$('#button').click(function(){
$('#inputBox').val('');
});
Have you tried anything at all? But this should do (edit after misread, see below):
$('#your_button').click(function() { $('#your_textbox').val(''); });
In Javascript:
document.getElementById('textField1').value = "";
Well, learn to break your tasks into smaller one and everything will become much easier. Here, for example, you have 2 tasks:
1) Place a "X" button near input. This is achieved by CSS and HTML. You HTML might look like:
Then you should align your image with you input
2) Actual erasing. In jQuery:
$("#x_button").click( function() {
$("#input_id").val( "" );
});
But this is real basics of web development, so you should really consider to read some kind of book on it.
You can do it with html5 value.
<input type="text" placeholder="Your text here">
Assuming your text field looks like this one :
<input type="text" id="myText"></input>
and your button looks like this one :
<input type="button" id="myButton"></input>
You just have to do this in javascript :
<script type="text/javascript">
var myButton = document.getElementById('myButton');
myButton.addEventListener("click", function () {
document.getElementById('myText').value = '';
}, false);
</script>
If you're using jQuery it's even easier :
<script type="text/javascript">
$('#myButton').click(function() {
$('#myText').val('');
});
</script>
here is a sample:
Html:
<input type="text" id="txtText" value="test value" />
<input type="button" id="btnClear" value="Clear" />
javascript:
$(document).ready(function () {
$("#btnClear").click(ClearText);
});
function ClearText() {
$("#txtText").val("");
}

Validate TextBox In JavaScript

i need a validate textbox which is accepted like this $250.00 here is '$' will accepted only one time and then never accepted '$' as well as '.'(dot).
You could use a masked input for example
your mask would be
$('#input').mask('$9?.99');
You can do:
var x = document.getElementById('your-text-box').value;
if(x.match(/^\$[0-9]+\.[0-9]+$/) == null) {
// invalid
}
else {
// valid
}
The regex /^\$[0-9]+\.[0-9]+$/ will match any string meeting the following constraints
Should start with a $
Should have 1 or more numbers after the $
Should have a . after the first set of numbers
Should end with 1 or more numbers after the .
Is jquery an option?
Here is a jquery solution. First of all I wouldn't validate expecting user to put '$'. I would put that outside the form and just allow people to enter the amount. That's weird, but I guess I don't really have the context on what you are doing. See Jquery validation:
$("#myform").validate({
rules: {
field: {
required: true,
digits: true
}
}
});
This is using digits to allow only numbers. Otherwise if you really need $ in there you need to create a custom validation rule.
<!-- wherever your jquery file is -->
<script src="../../jquery.min.js"></script>
<input type="text" id="cost"><input type="button" id="check" value="Check!">
<script>
// jquery solution
$(document).ready( function (){
$('#check').click( function (){
var cost = $('#cost').val();
var patt=/^(\$)?\d+(\.\d+)?$/;
var result=patt.test(cost);
alert(result);
});
});
</script>
Of course you can use pure java script as well to reduce the dependency
<input type="text" id="cost">
<input type="button" id="check" value="Check!" onClick="check();">
<script>
// Pure Javascript Solution
var check = function (){
var cost = document.getElementById('cost').value;
var patt=/^(\$)?\d+(\.\d+)?$/;
var result=patt.test(cost);
alert(result);
}
</script>

Categories