trying to validate my form - javascript

i am trying to validate my form which in jsp but it is not happening!!It runs fine but it i not calling the function validatemark which is in my javascript file
here is my code:
<%# page import = "javax.servlet.http.HttpServlet" %>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import= "org.akash.java.DabManager" %>
<%# page import= "org.akash.java.GetsSets" %>
<%# page import= "java.sql.ResultSet" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="ValidateMark.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>FILL IN YOUR MARKS HERE</title>
</head>
<body>
<form action="MarksServlet" method="post" name="SubjectMarks" onsubmit="return(validatemark());" >
<table cellpadding="2" width="20%" bgcolor="maroon" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Subject Marks Form</b></font></center>
</td>
</tr>
<%
String stid= request.getParameter("identity");
%>
</tr>
<tr>
<td>ID</td>
<td><input type="text" name="iden" id="iden" size="10" value= <%=stid %>></td>
</tr>
<tr>
<td>Name</td>
<%
try {
ResultSet resu= null;
DabManager dab= new DabManager();
resu= dab.Getsname(stid);
if(resu.next())
{
String sname= resu.getString("sname");
%>
<td><input type="text" name="yourname" id="yourname" size="30" value=<%=sname %>></td>
<%
}
}catch(Exception e)
{
e.printStackTrace();
}
%>
</tr>
<tr>
<td>Physics</td>
<td><input type="text" name="Physics" id="Physics" size="10"></td>
</tr>
<tr>
<td>Chemistry</td>
<td><input type="text" name="Chemistry" id="Chemistry" size="10"></td>
</tr>
<tr>
<td>Mathematics</td>
<td><input type="text" name="Maths" id="Maths" size="10"></td>
</tr>
<tr>
<td>Biology</td>
<td><input type="text" name="Biology" id="Biology" size="10"></td>
</tr>
<tr>
<td>
<input type="reset">
</td>
<td colspan="2">
<input type="submit" value="Submit Form" onclick ="confirms()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
and here is my javascript code in ValidateMark.js:
function validatemark()
{
if( document.SubjectMarks.iden.value == "" || isNaN( document.SubjectMarks.iden.value))
{
alert( "Please provide a valid id!" );
document.SubjectMarks.iden.focus() ;
return false;
}
if( document.SubjectMarks.yourname.value == "" )
{
alert( "Please provide your Name!" );
document.SubjectMarks.yourname.focus() ;
return false;
}
if( document.SubjectMarks.Physics.value == "" || isNaN(document.SubjectMarks.Physics.value)|| document.SubjectMarks.Physics.value >100)
{
alert( "Please enter valid marks!!" );
document.SubjectMarks.Physics.focus() ;
return false;
}
if( document.SubjectMarks.Chemistry.value == "" || isNaN(document.SubjectMarks.Chemistry.value)|| document.SubjectMarks.Chemistry.value >100)
{
alert( "Please enter valid marks!!" );
document.SubjectMarks.Chemistry.focus() ;
return false;
}
if( document.SubjectMarks.Maths.value == "" || isNaN(document.SubjectMarks.Maths.value)|| document.SubjectMarks.Maths.value >100)
{
alert( "Please enter valid marks!!" );
document.SubjectMarks.Maths.focus() ;
return false;
}
if( document.SubjectMarks.Biology.value == "" || isNaN(document.SubjectMarks.Biology.value)|| document.SubjectMarks.Biology.value >100)
{
alert( "Please enter valid marks!!" );
document.SubjectMarks.Physics.focus() ;
return false;
}
return true;
}
function confirms()
{
if(validatemark()== true)
alert("Marks Entered Successfully");
}

onsubmit="return(validatemark());"
to
onsubmit=" return validatemark();"

Related

SHTML and JavaScript not working

I am having a problem with my javascript not working inside my includes file that is a SHTML file. This is for a class I am tacking, but any way since we do not have SSI we have to use SHTML so we can use #includes here is what I have. I have just like the book ask but is not working. now this is my head document
<!DOCTYPE html>
<!-- head_document.shtml -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<base href="http://studentwebfiles.us/CPM190/MSchultz/ssi/index.shtml">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/tablet.css"
media="screen and (max-width: 900px)">
<script src="scripts/feedbackFormValidate.js"></script>
<title> Every Little Detail Auto Supplies - USA's Largest Supplier</title>
</head>
now this is my feedback.shtml file. Everything works beside the javascript
include virtual="../common/document_head.shtml"-->
<body>
<header>
<!--#include virtual="../common/logo_row.shtml"-->
<!--#include virtual="../common/mainmenu_row.shtml"-->
</header>
<h3>Customer Feedback Form</h3>
<form id="contactForm" onsubmit="feedbackFormValidate()">
<table>
<tr>
<td>Salutation:</td>
<td><select name="salute">
<option> </option>
<option>Mrs.</option>
<option>Ms.</option>
<option>Mr.</option>
<option>Dr.</option>
</select></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" size="40"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" size="40"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input name="email" size="40" type="text"></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="phone" size="40"></td>
</tr>
<tr>
<td>Subject:</td>
<td><input type="text" name="subject" size="40"></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="30" name="message" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2">Please check here if you wish to receive a reply:
<input type="checkbox" name="reply" value="yes"></td>
</tr>
<tr>
<td><input type="submit" value="Send Feedback"></td>
<td class="RightAligned">
<input type="reset" value="Reset Form"></td>
</tr>
</table>
</form>
<footer>
<!--#include virtual="../common/footer_row.shtml"-->
</footer>
</body>
This is my . js file
function feedbackFormValidate()
{
var contactFormObj = document.getElementById("contactForm");
var firstName = contactFormObj.firstName.value;
var lastName = contactFormObj.lastName.value;
var phone = contactFormObj.phone.value;
var email = contactFormObj.email.value;
var everythingOK = true;
if (!validateName(firstName))
{
alert("Error: Invalid first name.");
everythingOK = false;
}
if (!validateName(lastName))
{
alert("Error: Invalid last name.");
everythingOK = false;
}
if (!validatePhone(phone))
{
alert("Error: Invalid phone number.");
everythingOK = false;
}
if (!validateEmail(email))
{
alert("Error: Invalid e-mail address.");
everythingOK = false;
}
if (everythingOK)
{
if (contactFormObj.reply.checked)
alert("Warning: The e-mail feature is currently not supported.");
alert("All the information looks good.\nThank you!");
return true;
}
else
return false;
}
function validateName(name)
{
var p = name.search(/^[-'\w\s]+$/);
if (p == 0)
return true;
else
return false;
}
function validatePhone(phone)
{
var p1 = phone.search(/^\d{3}[-\s]{0,1}\d{3}[-\s]{0,1}\d{4}$/);
var p2 = phone.search(/^\d{3}[-\s]{0,1}\d{4}$/);
if (p1 == 0 || p2 == 0)
return true;
else
return false;
}
function validateEmail(address)
{
var p = address.search(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})$/);
if (p == 0)
return true;
else
return false;
}
any help or ideas would be great! Thanks
figured it out Ipages keep kicking out onsubmit.

Need help checking verification of radio buttons JavaScript

I am doing a GCSE computing coursework task and I am trying to get the validation right on a set of 3 radio buttons however the code for the radio buttons (which I copy and pasted from an external source that I do not remember now) however this copy and pasted code seems to override the validation for the other fields (Two text input fields and a number input field) The code is shown below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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.examnumber.value=="") {
msg+="You must enter the exam number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else{
return confirm('You have chosen '+checked.value+' is this correct?');
}
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="examnumber">Exam Number</td>
<td><input type="number" name="examnumber" size="4" maxlength="4"></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br/>
</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>
</body>
</html>
You still had quite some errors in the HTML document:
duplicate ID's
unclosed <input> tags
missing 'else' in javascript
duplicate </body> tag
extra double quotes in <script> tag
I fixed these. I also moved the alert of your msg variable above the check for the options, so that they don't interfere with each other. In order to get the first field to focus instead of the last in line, I've added a check to see if result is still true:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
}
</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="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4"/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
</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>

Radio Buttons in HTML And JavaScript

I am just wondering if anyone can help me insert radio buttons into my HTML webpage to insert the difficulty of the exam, This is my question
5. Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Here is my code, Can anyone help me out please
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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.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>
</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="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>
</form>
</body>
</body>
</html>
JFiddle:
http://jsfiddle.net/Jgv9q/
Simply add the radio buttons in your html and run code to find out which one was checked. You should be referencing w3Schools when just learning but got you started here.
http://jsfiddle.net/hyysy/1/
<tr>
<td>Exam Level</td>
<td><input type="radio" name="exam" value="GCSE">GCSE<br>
<input type="radio" name="exam" value="AS">AS<br>
<input type="radio" name="exam" value="ALevel">ALevel</td>
</tr>
and then to find out which is checked, you can use:
var x = document.getElementsByName('exam')
for(var k=0;k<x.length;k++)
if(x[k].checked){
alert('Option selected: ' + x[k].value)
}
Read more here:
http://www.w3schools.com/html/html_forms.asp

showing database value with an image using JSP

I have created a simple site that reads a database table and displays it in a html table in the browser.
I have a button that allows for the table to be altered, saved & then automatically forwarded to the homepage with the updated table.
I also have a select button with which the user can select that particular row and it updates a column in the table.
My problem is that I need a way to show which row has been selected.
I prefer to have a column in the HTML table that shows an image as to which one is selected.
Here is my homepage where the database table is being displayed.
In the left column of the html is where I would like to add an image if that row is selected.
I have tried several things like using javascript and just can't wrap my head around it?
Can I get some help?
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="java.io.*, java.util.*, java.sql.*"%>
<%#page import="oracle.jdbc.driver.OracleConnection" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function editRecord(id) {
var f=document.form;
f.method="post";
f.action='edit.jsp?id='+id;
f.submit();
}
function selectRecord(id, btn, i) {
var f=document.form;
f.method="post";
f.action='select.jsp?id='+id;
f.submit();
if(!btn.style) {
alert("not supported");
return;
} else{
btn.style.background = "red";
return;
}
}
</script>
</head>
<body>
<br><br>
<form method="post" name="form">
<table id="data" border="1">
<tr>
<th>Selected</th>
<th>Name</th>
<th>Address</th>
<th>Contact No</th>
<th>Email</th>
<th>Select</th>
</tr>
<%
int sumcount=0;
ResultSet rs = null;
Connection con = null;
Statement st = null;
try {
DriverManager.registerDriver (new oracle.jdbc.OracleDriver());
con = DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:XE", "username", "password");
st = con.createStatement();
rs = st.executeQuery("SELECT * FROM employee");
%>
<%
while(rs.next()) {
%>
<tr>
<td></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
<td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>
</tr>
<%
}
%>
<%
}
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</form>
</body>
</html>
<script language="javascript">
function editRecord(id) {
var f=document.form;
f.method="post";
f.action='edit.jsp?id='+id;
f.submit();
}
function selectRecord(id, btn, i) {
//Here goes the code to display image
var images = document.getElementsByName("selectImg");
for(var i=0;i<images.length;i++){
if(images[i].id!="img_"+id)
images[i].style.display="None";
else
images[i].style.display="Block";
}
//End
var f=document.form;
f.method="post";
f.action='select.jsp?id='+id;
f.submit();
if(!btn.style) {
alert("not supported");
return;
} else{
btn.style.background = "red";
return;
}
}
</script>
You need to put a hidden div with image in first column.
<%
while(rs.next()) {
%>
<tr>
<td><div name="selectImg" id="img_<%=rs.getString(1)%>">
<img src="path_to_image"></div></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
<td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>

how to make the validation of my web form just like yahoo registration page?

i am able to display an alert msg when my form fields are empty but i want to display a red colored msg in front of empty field just like in yahoo registration form i dont know how to do this can any one explain to understand it
function validate_form ( )
{
valid = true;
if ( document.form.login.value == "" )
{
valid = false;
document.getElementById("LoginError").visible=false;
}
else
{
document.getElementById("LoginError").visible=false;
}
if(document.form.password.value == "" )
{
valid = false;
document.getElementById("PasswordError").visible=false;
}
else
{
document.getElementById("PasswordError").visible=false;
}
return valid;
}
//-->
</script>
<form name="form" method="post" action="UserLogin" onSubmit="return validate_form();">
<table width="592" height="127" border="0">
<tr>
<td width="46" height="29"> </td>
<td colspan="3"><%! private Boolean bRecord = false;
private Boolean bLogin = false;
%>
<% if(request.getAttribute("signup") != null)
bRecord =(Boolean)request.getAttribute("signup");
else
bRecord = false;
if(request.getAttribute("invalidlogin") != null)
bLogin =(Boolean)request.getAttribute("invalidlogin");
else
bLogin = false;
if(bRecord == true )
{%>
<font color="#336600"><b>You are Successfully Signed Up</b></font>
<%
request.removeAttribute("signup");
}//end if
if(bLogin == true )
{%>
<font color="#FF0000"><b>Invalid Login or Password</b></font>
<%
request.removeAttribute("invalidlogin");
}//end if
%></td>
</tr>
<tr>
<td> </td>
<td width="135"><div class="style1">LOGIN: </div></td>
<td width="146"><input type="text" name="login"></td>
<td width="247">*<span id="LoginError" visible="false" style="color: Red;">Enter login</span>
</td>
</tr>
<tr>
<td> </td>
<td><div class="style1">PASSWORD: </div></td>
<td><input name="password" type="password" id="password"></td>
<td>*<span id="PasswordError" visible="false" style="color: Red;">enter Password</span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right"><input name="Submit" type="image" class="bgtop" value="SIGN IN" src="images/btn_s.JPG" border="0" >
</td>
<td> </td>
</tr>
</table>
</form>
regards
You can simply add a non-visible span in front of the field
<span id="spanUsernameRequired" style="visibility: hidden; color: Red;">
This information is required</span>
<input id="username" type="text" />
Submit
, and then make it visible when the field is empty
function validate_form()
{
if (document.getElementById("username").value == "")
{
document.getElementById("spanUsernameRequired").style.visibility = 'visible';
return false;
}
else
document.getElementById("spanUsernameRequired").style.visibility = 'hidden';
return true;
}

Categories