I need to validate my Textbox by using Javascript. The TextBox shouldn't be null and after decimal point, only two digits are allowed.
It will be better if you restrict any other character except .(dot) and numbers.
Please look at the below code
<html>
<head>
<title> Regexpression Tester </title>
<script type="text/javascript">
function Validate() {
var rgexp = new RegExp("^([0-9]*\.?[0-9]{1,2})$");
var input = document.getElementById("tbNumber").value;
if (input.match(rgexp))
alert("Valid");
else
alert("Not Valid");
}
</script>
</head>
<body>
<input type="text" id="tbNumber"/>
<input type="button" onclick="Validate()" value="Validate"/>
</body>
</html>
I think it will satisy yor need.
Related
This form should show a error message when I enter more than 8 characters and the characters are not all numbers. Why doesn't it work?
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name="myform" onsubmit="return validateForm()">
<input type="text" id="username">
<input type="submit">
</form>
<script>
function validateForm(){
var x = document.getElementById("username");
if(x.match(/^[0-9]{8,}$/))
return true;
else{
alert("MESSAGE");
return false;
}
}
</script>
</body>
</html>
Your code is incorrect it should be x.value.match, x is the object, x.value is the value
DOM elements do not have a .match() method. You probably want to get .value, which is a string.
Change
var x = document.getElementById("username");
To
var x = document.getElementById("username").value;
I know there are 2-3 similar questions are on site but the mine is very specific.
So the situation is, I created a input field that validates a string if it matches /abc/ pattern (regex in javascript). But the output is very unexpected i.e., Even If i provide a input that matches the pattern then output is "Invalid input" and if i provide a input that doesn't matches the pattern then same above output. This is okay but I am unable to figure out what is what is happening when I am providing a valid input?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
</head>
<body>
<script>
function check() {
var field = document.getElementById("1").data;
var regex = /abc/;
if(regex.test(field) === true)
document.getElementById("2").innerHTML="Input accepted";
else
document.getElementById("2").innerHTML="Invalid input!";
}
</script>
First field:<br />
<input type="text" id="1"> <span id="2"></span> <br />
<button type="submit" onclick="check();">Validate</button>
</body>
</html>
document.getElementById("1").data
Is not a valid method. You have to use value method to obtain the data inside the input box. Try this code:
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
</head>
<body>
<script>
function check() {
var field = document.getElementById("1").value;
var regex = /abc/;
if(regex.test(field) === true)
document.getElementById("2").innerHTML="Input accepted";
else
document.getElementById("2").innerHTML="Invalid input!";
}
</script>
First field:<br />
<input type="text" id="1"> <span id="2"></span> <br />
<button type="submit" onclick="check();">Validate</button>
</body>
</html>
PS: Please do use a bit of debugging tools that the browsers provide.
try using .value instead of .data
<script>
function check() {
var field = document.getElementById("1").value; //<--- here
var regex = /abc/;
if(regex.test(field) === true)
document.getElementById("2").innerHTML="Input accepted";
else
document.getElementById("2").innerHTML="Invalid input!";
}
</script>
Now if you write "abc" its will works.
Please check my code below. I want to display input characters number real time using jquery javascript. But problem is when i am doing it with "textarea" it works but when i do same with normal input type text its not work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<!-- Works -->
<!-- <textarea></textarea>
<span id="characters"><span>
<script type='text/javascript'>
$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script> -->
<!-- Not works -->
<input type="text" name="name">
<span id="characters"><span>
<script type='text/javascript'>
$('text').keyup(updateCount);
$('text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
</body>
</html>
Here is a working fiddle with combining your two events keyup and keydown into one line :-)
Your selector was wrong, text doesn't exist. So I call input[name="name"] instead to get the input by your name value:
$('input[name="name"]').on('keyup keydown', updateCount);
function updateCount() {
$('#characters').text($(this).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>
$("input").keyup(function(){
$("#characters").text($(this).val().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>
With "textarea" version you are selecting "textarea" by $('textarea').keyup(updateCount) and
$('textarea').keydown(updateCount) nicely but with text input you are doing wrong to select input text.
I have fix it by placing a id called "foo" on input text. This should be working now.
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<input type="text" id="foo" name="">
<span id="characters"><span>
<script type='text/javascript'>
$('#foo').keyup(updateCount);
$('#foo').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
If you want to get an input with the type text you must use a selector like this
$('input[type="text"]').keyup(updateCount);
$('input[type="text"]').keydown(updateCount);
Here is a list of all jQuery selectors
You are not selecting the input field here.
Try the following
$('input').keyup(updateCount);
$('input').keydown(updateCount);
Here you go with a solution https://jsfiddle.net/mLb41vpo/
$('input[type="text"]').keyup(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="">
<span id="characters"><span>
Mistake was $('text').keyup(updateCount);, you can refer input textbox using 'text'.
It should be $('input').keyup(updateCount);
Everything is correct in your code, you just need to add ":" beore your type. This will make it identify, it is input type.
Example:
<script type='text/javascript'>
$(':text').keyup(updateCount);
$(':text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
I changed your script only. Just find the change, you will get it.
This question already has an answer here:
Javascript not working on submit
(1 answer)
Closed 5 years ago.
I recently started doing form validation and I am trying to understand something. I have yet to find this anywhere else on SE.
When I have onsubmit="return validateForm()" or onsubmit="validateForm()" in the <form> element, the form does not do anything. However, when I remove onsbumit from the form tag and instead do document.forms["favorite"].onsubmit = function validateForm() in the JS file, it works fine.
I got it working, but I am trying to understand why the "normal" method of onsubmit in the html isn't working.
For reference, here is my code as it works now:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="form.js"></script>
<title>Form</title>
</head>
<body>
<form name="favorite" action="#" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
JS:
window.onload = function(){
document.forms["favorite"].onsubmit = function validateForm(){
var input = document.forms["favorite"]["car"].value;
if(input == ""){
alert("You missed an entry");
return false;
}
}
}
First of all we define a function and then we call that function. and you are calling that function before defining as you are using window.load.You need to define the validation function before window.load as you are using. Sorry for my poor English.
<script>
window.onload = function () {
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
}
</script>
define validateForm() function before window.load you do not need to write this function inside the window.load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<script>
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
</script>
</head>
<body>
<form name="favorite" action="#" onsubmit="return validateForm();" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
I am trying to validate an html form using javascript the code is bellow
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function validate(){
if(document.form1.thbox.checked)
{
alert("yes");
}
else
alert("no");
}
</script>
<form name="form1" method="get">
<input type="checkbox" name="thebox"/>
<input type="button" value="press me" onclick="validate()"/>
</form>
</body>
</html>
when ever I try to press on button nothing works
Can someone please tell me why is that?
Thank you
Change if(document.form1.thbox.checked) to if(document.form1.thebox.checked) You have missed e in thebox
http://jsfiddle.net/eJhzf/
Perhaps because checked is not a valid property of undefined:
HTML:
name="thebox"
Javascript:
form1.thbox.checked
Notice the missing e, so, it should be:
form1.thebox.checked
use this method
if ( document.form1.thebox.checked == false )
{
alert ( "Please select check box." );
}
else {
// your code or message
}
and use thebox instead of thbox