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.
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;
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>
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.
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
I really don't know why this validation doesn't work.
this is my html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="scripts.js"></script>
<title>Test Page!</title>
</head>
<body>
<form onsubmit ="return validateFormOnSubmit(this)" name="myForm" action = "testForm.html">
<input name="textField" type="text" value="" size="50" id= "textfield" /> <br />
<input name="button" type="submit" value="Submit"/>
</form>
</body>
</html>
and this is my javascript file:
function isURL(fld){
var error = "";
var regex = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
if(regex.test(fld.value)){
error = "No URL's Allowed!";
}
else{
error = "";
}
return error;
}
function validateFormOnSubmit(myForm) {
var reason = "";
reason += isURL(myForm.textField);
if (reason != "") {
alert("there's something wrong: \n" + reason);
return false;
}
return true;
}
Thanks for your help.
update: is the action really required? testpage.html is just an empty html file here!
update 2: The problem is I don't see any message or alert.
It works fine, your scripts.js file isn't loaded properly or an old version is cached in your browser
Looks like you're passing in the form, rather than the field that you're trying to validate.