The javascript function doesnt seem to be called, the validation is skipped and goes straight to the check page. I need the form elements to be validated before it moves to the intended destination, which is the check.jsp page.
I know there are better ways to validate forms but I want to know how to get it done this way, any help is appreciated :)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="validate" onsubmit="return validateall(this)" action="check.jsp" >
Username:<input type="text" name="uname">
Password:<input type="password" name="pwd">
Email:<input type="text" name="email">
<input type="submit" value="Submit" name="Submit">
</form>
<script>
function validateall(form)
{
var errlist="";
<% out.println("The function was called"); %>
errlist+=valuname(form.uname);
errlist+=valpwd(form.pwd);
errlist+=valemail(form.email);
if(errlist!="")
{
alert("Some fields need to be corrected");
return false;
}
alert("Sign Up successful");
return true;
}
function valuname(fld)
{
var error=""
if(fld.value=="")
{
error+="Cannot leave username empty";
fld.style.background='Red';
}
var illegalChars=/\W/;
else if((fld.value.length>=5))||(fld.value.length<=15))
{
error+="The username should be within 5 and 15 characters";
fld.style.background='Red';
}
else if(illegalChars.test(fld.value))
{
fld.style.background='Red';
error+="No illegal characters!";
}
return error;
}
function valpwd(fld)
{
var error=""
if(fld.value=="")
{
error+="Cannot leave password empty";
fld.style.background='Red';
}
var illegalChars=/[\W_]/;
else if((fld.value.length>=7))||(fld.value.length<=15))
{
error+="The username should be within 5 and 15 characters";
fld.style.background='Red';
}
else if(illegalChars.test(fld.value))
{
fld.style.background='Red';
error+="No illegal characters!";
}
return error;
}
function valemail(fld)
{
var error=""
if(fld.value=="")
{
error+="Cannot leave password empty";
fld.style.background='Red';
}
var illegalChars=/[\(\)\<\>\,\;\:\\\"\[\]]/;
else if(illegalChars.test(fld.value))
{
fld.style.background='Red';
error+="No illegal characters!";
}
return error;
}
</script>
</body>
</html>
You can stop sefault submission like this:
$(document).ready(function() {
$('form').on('submit', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});
});
Another Example From Jquery.com
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<style>
p {
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "correct" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
event.preventDefault();
});
</script>
</body>
</html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.