I have two forms in my JSP page which should be validated by two embedded JS scripts (see code below). The trouble is that the scripts don't work properly and omit validating the first entries (username and loginName respectively). I had two external Javascript files to do the validation but that had a similar problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scotia Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<!-- <script type="text/javascript" src="scripts/stafflogin.js"></script> -->
<!--<script type="text/javascript" src="scripts/userlogin.js"></script> -->
<link rel="stylesheet" type="text/css" href="styles/DWBA.css"/>
</head>
<body>
<div class="outer">
<div class="header"><h1>Scotia Island & Wildlife Cruises</h1></div>
<div class="box"><h2>Login Page</h2>
<script>
function validateform1() {
var username = document.stafflogin.username.value;
var password = document.stafflogin.password.value;
if (username === null || username === "") {
alert("Please enter the admin username");
document.stafflogin.username.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter the admin password");
document.stafflogin.password.focus();
return false;
}
}
</script>
<form name="stafflogin" action="CustomerServlet" onsubmit="return validateform1()"><!-- -->
<h3>Staff Login with username and password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Staff Username:</p></td><!-- USERNAME is admin -->
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td align="left"><p>Staff Password:</p></td><!-- PASSWORD is admin -->
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td align="left"><input type="submit" value="stafflogin" name="submit" style="width:75px" /></td>
<td><br /><input type="hidden" name="username" value="" /></td>
</tr>
</table>
</form>
<br />
<script>
function validateform2() {
var name = document.userlogin.loginName.value;
var password = document.userlogin.loginPasswd.value;
if (name === null || name === "") {
alert("Please enter your username");
document.userlogin.loginName.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter your password");
document.userlogin.loginPasswd.focus();
return false;
}
}
</script>
<form name="userlogin" method="POST" action="LoginServlet" onsubmit="return validateform2()">
<h3>Customer Login with login name and login password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Login name:</p></td><!-- -->
<td><input type="text" name="loginName" id="loginName"/></td>
</tr>
<tr>
<td align="left"><p>Login password:</p></td><!-- -->
<td><input type="password" name="loginPasswd" id="loginPasswd"/></td>
</tr>
<tr>
<td align="left"><input type="submit" value="userlogin" name="submit" style="width:75px" /><br /></td>
<td><input type="hidden" name="loginName" value="" /></td>
</tr>
</table>
</form>
<br />
<form name="Form" action="CustomerServlet">
<h3>New Customer registration</h3>
<p>To register, click on "register" below:</p>
<table cellspacing="8" border="0">
<tr>
<td><input type="submit" value="register" name="submit" style="width:75px" /></td>
</tr>
</table>
</form>
</div>
<div class="footer"><div align="center"><!-- ALIGNS EVERYTHING WITHIN DIV -->
<p>© Copyright Scotia Island & Wildlife Cruises, Harbour Road, Morar, Invernessshire.</p>
<form>
<tr>
<td><input type="submit" value="home" name="submit" style="width:75px" /></td>
</tr><br />
</form></div>
</div><br />
</div>
</body>
</html>
As I am a novice at Javascript I need some help to work out why two separate forms and validation scripts won't work as expected. (I have other JSP pages with single external Javascript validation scripts and they all work as intended).
Can anyone suggest a solution?
The answer is to remove the hidden inputs from each form eg.
<input type="hidden" name="username" value="" />
and
<input type="hidden" name="loginName" value="" />
so the forms look like this:
<script type='text/javascript'>
function validateform1() {
'use strict';
var username = document.stafflogin.username.value;
var password = document.stafflogin.password.value;
if (username === null || username === "") {
alert("Please enter the admin username");
document.stafflogin.username.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter the admin password");
document.stafflogin.password.focus();
return false;
} else {
document.stafflogin.submit();
}
}
</script>
<form name="stafflogin" action="CustomerServlet" onsubmit="return validateform1()">
<h3>Staff Login with username and password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Staff Username:</p></td>
<td><input type="text" name="username" id="username" required /></td>
</tr>
<tr>
<td align="left"><p>Staff Password:</p></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td align="left"><input type="submit" value="stafflogin" name="submit" style="width:75px" /></td>
</tr>
</table>
</form>
and this:
<script type='text/javascript'>
function validateform2() {
'use strict';
var name = document.userlogin.loginName.value;
var password = document.userlogin.loginPasswd.value;
if (name === null || name === "") {
alert("Please enter your username");
document.userlogin.loginName.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter your password");
document.userlogin.loginPasswd.focus();
return false;
} else {
document.userlogin.submit();
}
}
</script>
<form name="userlogin" method="POST" action="LoginServlet" onsubmit="return validateform2()">
<h3>Customer Login with login name and login password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Login name:</p></td>
<td><input type="text" name="loginName" id="loginName"/></td>
</tr>
<tr>
<td align="left"><p>Login password:</p></td>
<td><input type="password" name="loginPasswd" id="loginPasswd"/></td>
</tr>
<tr>
<td align="left"><input type="submit" value="userlogin" name="submit" style="width:75px" /><br /></td>
</tr>
</table>
</form>
In short there was nothing wrong with the Javascript.
Related
NOTHING IS WORKING! I added onSubmit = "validate()" to my register button in the form, and I made the function and the alert if the fields are left empty. But NOTHING IS WORKING!
No alerts no errors in console. No hope!
<head>
<title>WHAT THE TECH!</title>
<script type="text/javascript">
function validate() {
let fullname = document.getElemenyByname("full_name").value;
let email = document.getElemenyById("email").value;
let pass = document.getElemenyById("password").value;
let add = document.getElemenyById("address").value;
if (fullname == "" || fullname.length == 0) {
alert("Enter Full Name");
document.getElemenyById("full_name").focus;
return false;
} else if (email == "" || email.length == 0) {
alert("Enter Email Address!");
document.getElemenyById("email").focus;
return false;
}
}
</script>
</head>
<body>
<div class="mainwrap">
<div class="content">
<div class="SignUp">
<div class="Formup">
<div class="title">New here? Register!</div>
<form name="register">
<table>
<tr>
<td>Full Name: </td>
<td><input type="text" id="full_name">
</td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" id="email">
</td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" id="password">
</td>
</tr>
<tr>
<td>Country: </td>
<td>
<select>
<option value="U.A.E">U.A.E</option>
<option value="K.S.A">K.S.A</option>
<option value="Qatar">Qatar</option>
</select>
</td>
</tr>
<tr>
<td>Gender: </td>
<td>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</td>
</tr>
<tr>
<td>Address: </td>
<td><input type="text" id="address">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Register" class="registerbutton" name="register" onSubmit="validate()">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
You should use document.getElementsByName if you want to fetch the value using name attribute. I would recommend to do it by "id" attribute.
function submitFunction() {
var firstName = document.getElementsByName("first_Name")[0].value;
if (firstName == "" || firstName == null || firstName.length == 0) {
alert("First Name is required");
return false;
}
}
Also add return to the onsubmit event to avoid page refresh.
<form name="Register" onsubmit="return submitFunction() " method="post">
Option 2 : Using HTML5
The required attribute will do the validation check and you can skip javascript.
<input type="text" name="first_Name" required>
How can I expand the javascript code so that the examination number can only have a maximum length of 4 digits entered and the user cannot type anymore. Also how can I expand the code so that the examination field isn't left out. Aswell for the radio buttons I want to add a validation so if someone checks any box e.g GCSE a message will come up saying you have ticked (radio button ticked)
Thanks in advance
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="name">Examination number</td>
<td><input type="text" name="Examination number" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
<p> Please select <b>ONE</b> button.</br>
<input type="radio" name="group1" value="GCSE">GCSE<br>
<input type="radio" name="group1" value="AS" checked>AS<br>
<input type="radio" name="group1" value="A2" checked>A2<br>
</body>
</html>
<html>
<head>
<title>Success message</title>
</head>
<body>
<H1> You entered all the data required </H1>
</body>
</html>
You can use maxlength:
<input type="text" id="test" name="test" maxlength="4"/>
or in JavaScript you can do this:
Example
var input = document.getElementById("test");
input.oninput = function(){
if (input.value.length > 4)
{
var str = input.value;
str = str.substring(0, str.length - 1);
input.value = str;
alert("Some error message here");
}
}
<input type="text" name="Examination number" maxlength="4"/> for maxlength
put this in form onsubmit="return validateForm();"
check this for javascript validation
http://www.w3schools.com/js/js_form_validation.asp
learn yourself.
I was just wondering if anyone was able to help me with a JavaScript validation routine, Im trying to make it so that the Exam ID Number gets validated after information has been submit, So far all that is needed is name and subject and it will allow the examiner to proceed through without entering the exam ID number, Can anyone help me with this.
<script language="javascript"" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter your Exam ID Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam Number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family: "Comic Sans MS";
}
</style>
<h1>Exam Entry Form</h1>
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr> <tr>
<td id="Exam Number">Exam ID Number</td>
<td><input type="Number" name="ID Number"maxlength="4" > </td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
Here is the full html
<html>
<head>
<script type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
if (document.getElementById("txtname").value == "") {
msg += "You must enter your name \n";
document.getElementById("name").focus();
document.getElementById('name').style.color = "red";
result = false;
}
if (document.getElementById("txtsubject").value == "") {
msg += "You must enter the subject \n";
document.getElementById("subject").focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.getElementById("ID_Number").value == "") {
msg += "You must enter your Exam ID Number \n";
document.getElementById("ID_Number").focus();
document.getElementById('Exam Number').style.color = "red";
result = false;
}
if (msg == "") {
return result;
}
else {
alert(msg)
return result;
}
}
</script>
</head>
<body>
<form id="ExamEntry">
<h1>
Exam Entry Form</h1>
<table width="50%" border="0">
<tr>
<td id="name">
Name
</td>
<td>
<input type="text" id="txtname" />
</td>
</tr>
<tr>
<td id="subject">
Subject
</td>
<td>
<input type="text" id="txtsubject" />
</td>
</tr>
<tr>
<td id="Exam Number">
Exam ID Number
</td>
<td>
<input type="Number" id="ID_Number" maxlength="4">
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onclick="return validateForm();" />
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
For some reason my java script is changing the colour of the text but not showing my error message, any help would be greatful!
The code is a simple HTML form that asks for examiners name, number, subject and also has some radio buttons
<HTML>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.ExaminationNumber.value=="") {
msg+="You must enter the Examination Number \n";
document.ExamEntry.ExaminationNumber.focus();
document.getElementById('Examination Number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="S:\codes\success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
<title>Exam entry</title>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Examination Number">ExaminationNumber</td>
<td><input type="text" name="Examination Number" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<tr>
<td><input type="reset" name="Reset" value="Reset" /></td>
<input type="radio" name="qualification" value="GCSE">GCSE<br>
<input type="radio" name="qualification" value="AS">AS<br>
<input type="radio" name="qualification" value="A2">A2<br>
</form>
</tr>
</table>
</body>
</HTML>
IDs cannot have spaces.. Change Examination Number to something like Examination_Number or ExaminationNumber
Fixed jsFiddle example
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
im completly new to js , i made this form for a project we got # university but js doesnt seem to work at all. I dont get any errors, it is just doesnt work ! I got my Javascript enabled , and i full disabled No script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'];?>"/>
<script type="text/javascript">
function validate_f() {
var result=true;
var username=document.getElemenetById('username').value;
var illegalChars = /\W/;
var x=document.getElemenetById('email').value;
var pwd=document.getElemenetById('password').value;
if (illegalChars.test(username) || username.length>25) {
result=false;
alert("Username must be latin chars and not more than 25 characters");
}
if (x==null || x=="" || username == null || username=="" || pwd == null || pwd == "" || afm == null || afm == "" ) {
result=false;
alert("you have to fill up all the Boxes dude");
}
return result;
}
<div id="main">
<div id="formcontainer">
<form id="data" name="data" action="connection.php" method="POST" on submit="return validate_f()">
<table width="100%" cellpadding="3" cellspacing="2">
<tr>
<td width="25%"> </td>
</tr>
<tr>
<td class="right" width="20%"> <strong> Username </strong> </td>
<td>
<input type="text" name="username" id="username" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Password</strong> </td>
<td>
<input type="password" name="password" id="password" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Email</strong> </td>
<td>
<input type="text" name="email" id="email"/>
</td>
</tr>
<?php
/*
<tr>
<td class="right"> <strong> Security Code: </strong> </td>
<td>
<img src="CaptchaSecurityImages.php" alt="" />
<input id="security_code" name="security_code" type="text" />
</td>
</tr>
*/
?>
<tr>
<td>
<input name="reset" type="reset" id="reset" value="Reset" />
<input name="submit" type="submit" id="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</div>
</div>
There is no space between onsubmit event
<form id="data" name="data" action="connection.php" method="POST" onsubmit="return validate_f()">
There's a spelling mistake -
document.getElemenetById('password').value
var username=document.getElemenetById('username').value;
Should be
document.getElementById('password').value
var username=document.getElementById('username').value;
Ref: https://developer.mozilla.org/en/DOM/document.getElementById
there is a space between on & submit. Try this line of form tag...
<form id="data" name="data" action="connection.php" method="POST" onsubmit="return validate_f()">
and also
Your div's should inside the <form> tag.
Close the </script> tag, before the start of <form>.
Close the </head> tag before start the <form> tag.
Close the </html> tag at the end of the html page.
Try this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'];?>"/>
<script type="text/javascript">
function validate_f() {
var result = true;
var username = document.getElemenetById('username').value;
var illegalChars = /\W/;
var x = document.getElemenetById('email').value;
var pwd = document.getElemenetById('password').value;
if (illegalChars.test(username) || username.length > 25) {
result = false;
alert("Username must be latin chars and not more than 25 characters");
}
if (x == null || x == "" || username == null || username == "" || pwd == null || pwd == "" || afm == null || afm == "") {
result = false;
alert("you have to fill up all the Boxes dude");
}
return result;
}
</script>
</head>
<body><div id="main">
<div id="formcontainer">
<form id="data" name="data" action="connection.php" method="POST" on submit="return validate_f()">
<table width="100%" cellpadding="3" cellspacing="2">
<tr>
<td width="25%"> </td>
</tr>
<tr>
<td class="right" width="20%"> <strong> Username </strong> </td>
<td>
<input type="text" name="username" id="username" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Password</strong> </td>
<td>
<input type="password" name="password" id="password" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Email</strong> </td>
<td>
<input type="text" name="email" id="email"/>
</td>
</tr>
<?php
<tr>
<td class="right"> <strong> Security Code: </strong> </td>
<td>
<img src="CaptchaSecurityImages.php" alt="" />
<input id="security_code" name="security_code" type="text" />
</td>
</tr>
<tr>
<td>
<input name="reset" type="reset" id="reset" value="Reset" />
<input name="submit" type="submit" id="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>