Reputation: 37
Below is my JSP file, and I was using a servlet to check if the fields are null, but apparently this needs to be done on the client side. How do I prevent the form from submitting when the submit button is pressed and a field is empty?
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page session="false" %>
<!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=ISO-8859-1">
<style type="text/css">
h1 { font-family : cooper black;}
</style>
<title>Add a Phonebook Entry</title></head>
<body>
<h1> Add a Phonebook Entry</h1>
<form action="process.do" method="GET">
<table summary="phonebook entry table">
<tr>
<td>Last name:</td>
<%
String last = "";
String first = "";
String phone = "";
if(request.getParameter("surname")!=null){
last = (String) request.getParameter("surname");
}
if(request.getParameter("firstname")!=null){
first = (String) request.getParameter("firstname");
}
if(request.getParameter("phone")!=null){
phone = (String) request.getParameter("phone");
}
%>
<td><input type="text" title="enter your last name here" name="surname" name="initials" size=10 maxlength=10 value=<%= last %> ></td>
</tr>
<tr>
<td>First name:</td>
<td><input type="text" name="firstname" size=10 maxlength=10 value=<%=first %> ></td>
</tr>
<tr>
<td>Phone number: </td>
<td><input type="text" name="phone" maxlength=10 size=10 value=<%=phone %> > </td>
</tr>
</table>
<br><input type="submit" value="Submit">
</form>
<p> View the phonebook <a href="./Display.jsp">here</a></p>
Upvotes: 0
Views: 13024
Reputation: 1
try the following ... should work remeber the <% ..... %>
out.print("Please enter ");
if(fieldname.length()==0){
out.print("field name");
}
if (fieldname2.length()==0) {
out.print(" and ");
}
if (fieldname2.length()==0){
out.print("field name2");
}
out.println("breakline");
Upvotes: 0
Reputation: 11742
That small piece of JavaScript could be, using jQuery:
$("#form").submit(function() {
var requiredFailed = true;
$("#form input:text").each(function() {
if ($.trim($(this).val()).length == 0) {
requiredFailed = false;
return false;
}
});
return requiredFailed;
});
It looks through all inputs of type text and if any input will be null, form won't be submitted.
Upvotes: 1
Reputation: 13090
JavaScript
Basically have a short script which checks all inputs are populated. If not then block the submission request.
You will still have to implement something server side to check the fields, as a user could disable JavaScript. The same goes for my following suggestion.
HTML5
There's also the HTML5 required attribute. I don't think this is supported in all browsers yet.
<input type="text" name="username" required>
If not populated and HTML5 validation is enabled the form will not submit.
Upvotes: 2