When the user presses the submit button and there is no text in the input box, I want an error window to appear. I am using JSF to create the web page and JS for the script. For some reason the script does not run.
Here is the whole page code :
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<link rel="stylesheet" href="testcss.css" />
<h:head>
<title>Print to Uni</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
</h:head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<h1><a href="index.xhtml">Remote<span class="logo_colour">Printing</span></a></h1>
<h2>This is a web app that allows users to print to University</h2>
</div>
</div>
</div>
</div>
</body>
<div id="site_content">
<div id="content">
<h:body>
<h:form onsubmit="return required();">
Please enter your username:
<h:inputText id="Username" value="#{user.id}"
size="20" required="true" label="Username">
</h:inputText><br></br><br></br>
To print a piece of text, please press the submit button below to upload the text:<br/><br/>
<h:commandButton type="Submit" value="Submit" onclick="return username_validation()" action="upload/uploadText" styleClass="Submit"/>
</h:form>
</h:body>
</div>
</div>
<script type="text/javascript">
function username_validation(){ //cannot get this to work
if (document.getElementById("Username").value.length == 1)
{
alert("Please enter a username");
return false;
}
return true;
}
function show_alert() {
var msg = "Thank you";
alert(msg);
}
</script>
</html>
This is the code I’m trying to run when the user presses submit:
function username_validation(){ //cannot get this to work
if (document.getElementById("Username").value.length == 1)
{
alert("Please enter a username");
return false;
}
return true;
and heres the hform :
Please enter your username:
<h:inputText id="Username" value="#{user.id}"
size="20" required="true" label="Username">
</h:inputText><br></br><br></br>
To print a piece of text, please press the submit button below to upload the text:<br/><br/>
<h:commandButton type="Submit" value="Submit" onclick="return username_validation()" action="upload/uploadText" styleClass="Submit"/>
</h:form>
The problem is this line:
Will only fail if the username is exactly one character long.
If you want to validate that the username is present do the following instead: