What is wrong with my JavaScript? I want to show a errormessage next to the validate-field, but it doesnt show anything.
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jsformular.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="formBody">
<form name="myform" onsubmit="return validate()" method="post">
<div class="formField">
<div class="formFieldElement">
<label for="firstname">Firstname:*</label>
</div>
<div class="formFieldElement">
<input type="text" name="firstname">
</div>
<div class="formFieldElement formError" id="errorFirstname"></div>
</div>
</form>
</body>
</html>
you lost } in validate function
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
}
it's work
You were missing the close bracket at the end of your function.
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
}
When I typed nothing in the field and hit the enter key, it showed the error message.
For finding issues like this in future, I would highly recommend using the developer console included with Chrome or Firefox. It immediately flagged the error for me with the following error message:
Uncaught SyntaxError: Unexpected end of input
Related
I have a problem. There is something wrong with the code as even when the input like abc56, it still alert "Enter your name". Or when the input is abc, it should be displayed "Perfect" instead of "Enter your name". The input only allows characters not number and I think the regex is correct, the only wrong is the logic. Can you guys help me?
var check=document.forms["check"]["name"].value;
var reg=/^[a-zA-Z]+$/;
function ipt(){
if(check !== ""){
if(check.match(reg)===false){
alert("Only enter character please");
}
else{
alert("Perfect");
}
}
else{
alert("Enter your name");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check</title>
<script src="./check.js" defer></script>
</head>
<body>
<form name="check" onsubmit="ipt()">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>
you get the value of document.forms["check"]["name"] on page load.
not the value onsubmit event
and your regex usage is wrong, use RegExp.prototype.test()
it return a boolean value ( true or false)
do
const name_elm = document.forms.check.name
, reg = /^[a-zA-Z]+$/
;
function ipt() {
if (!!name_elm.value) // or if (name_elm.value !== '')
{
if (reg.test(name_elm.value))
{ alert('Perfect') }
else
{ alert('Only enter character please') }
}
else {
alert('Enter your name');
} }
You can clean up the if statement by using an else if.
When you check for a value in a form, use value when you need to see what the current value is.
var check = document.forms["check"]["name"];
var reg = /^[a-zA-Z]+$/;
function ipt(){
// check if its empty
if (check.value === "") {
alert("Enter your name");
// check if it matches the pattern
} else if (!check.value.match(reg)) {
alert("Only enter character please");
} else {
// Success!
alert("Perfect");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check</title>
<script src="./check.js" defer></script>
</head>
<body>
<form name="check" onSubmit="return ipt()">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>
Sorry guys, first time playing around with this. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>
</body>
</html>
When I enter the wrong password, INCORRECT PASSWORD comes up, but only for a fraction of a second. Then it's gone again. No idea why.
UPDATE:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
return false;
}
}
</script>
</body>
</html>
On submit, the form will trigger the default action, which in this case is to submit the contents to the same page (for lack of an action property).
So what you're seeing is the JavaScript runs and changes the style to show the error message, then the page reloads.
To ensure the page doesn't reload put return false at the end of passCheck. Better would be to use addEventListener and event.preventDefault(), but that's a little bit more involved.
<p>Please enter the password</p>
<form id="enter" onSubmit="passCheck(); return false;">
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit"/>
</form>
<p id="incorrect" style="display: none"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>
I am getting a SyntaxError: missing ; before statement. I have no idea why I'm getting this error since my code is EXACTLY the same as in the textbook I'm using. Please help. I will post code, and comment where syntax error is:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Practive</title>
<meta charset="utf-8">
<style>
input{display: block;
padding-bottom: 10px;
width: 250px;
text-align: left;}
label {float:left;}
</style>
<script type="text/javascript">
<!--
fuction validateForm() // SyntaxError: missing ; before statement
// before v
{
if (document.forms[0].userAge.value < 18){
alert ("Age is less than 18!");
return false;
} // end if
alert ("Age is valid.");
return true;
} // end function validateForm
// -->
</script>
</head>
<body>
<h1> JavaScript Form Handling </h1>
<form method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm();">
<label for="userName">Name: </label>
<input type="text" name="userName" id="userName">
<label for="userAge">Age:   </label>
<input type="text" name="userAge" id="userAge">
<input type="submit" value="send information" id="submit">
</form>
</body>
</html>
Note this:
fuction validateForm()
should be:
function validateForm()
You forgot the N in word function and fixing that is solution to your problem. :)
write function instead of fuction in your script like this
function validateForm()
{
if (document.forms[0].userAge.value < 18) {
alert("Age is less than 18!");
return false;
}
alert("Age is valid.");
return true;
}
You did mistake in calling function
Replace
fuction validateForm()
With
function validateForm()
You did spelling mistake in calling function.
In my web-application I have added javascript in a jsp file.
The alert message is popping up in Firefox. But the alert window is not working in IE 8. Following is the javascript that I am using.
Can anyone please tell how to make this work in IE 8?
function doSubmit() {
var checkbox = document.getElementById("terms");
if (!checkbox.checked) {
alert("error message goes here.");
return false;
} else {
return true;
}
}
Works fine, here is how you use it!
<html>
<head>
<script type="text/javascript">
function doSubmit() {
var checkbox = document.getElementById("vehicle");
if (!checkbox.checked) {
alert("error message goes here.");
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form name="frm1" onsubmit=" return doSubmit()">
<input type="checkbox" name="vehicle" value="Bike" />Checked<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
added correction as suggested.
i tried to find any helpful post for my problem, but didn't find so my question:
i want to validate form before submit it to data base. and this is my code:
<%# page language="java" contentType="text/html; charset=windows-1255"
pageEncoding="windows-1255"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<title>Registration</title>
<link rel="shortcut icon" href="img/icon0.png" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<script type="text/javascript">
function validate_form()
{
var isValid = true;
var username = document.getElementById("username").value;
if (username==null||username==""){
alert("WRong input");
isValid = false;
}
if(isValid == true)
{
return true;
}
return false;
}
</script>
</head>
<body>
<form action = "regServlet" method = "POST" onsubmit="return validate_form()">
<table id="regTable">
<tr>
<td class="firstRow">Username:</td>
<td><input type="text" name="username" value="" size="15"/></td>
</tr>
</table>
<input style="margin:auto;" type="image" name="loginB" src="../img/login_button.png" />
</form>
</body>
</html>
it's jsp file that runs in tomcat 6.
when i'm running the page, my javascript function doesn't work at all. I checked it with alert in the start of the function.
what is my problem? what i forgot?
Eclipse writes an error on form line (where onsubmit is appears):
cannot return from outside a function or method.
thanks
You need id=username because you have
document.getElementById("username")
You need to give your input with name="username" also an id="username"
DEMO: http://jsfiddle.net/maniator/tf5zA/
And your js could be cleaner:
function validate_form() {
var isValid = true;
var username = document.getElementById("username").value;
if (username == null || username == "") {
alert("WRong input");
isValid = false;
}
return isValid;
}
I also came across the "Cannot return from outside a function or method." and found a filed validation bug in Eclipse WTP at https://bugs.eclipse.org/bugs/show_bug.cgi?id=353209