JSP - 使用jsp页面进行Javascript表单验证

时间:2013-07-19 10:48:01

标签: javascript html jsp

我为网站开发了一个mvc 2 servlet应用程序。

一切正常。但是Javascript表单验证没有。

这是jsp的代码。

<%@page import="collaboration.Modello"%>
<%@page import="collaboration.Utente"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Iterator"%>
<%@ page session="true" %>
<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
<% Utente user = (Utente) session.getAttribute("user"); %>
<script language="Javascript">
function verifica(modulo){
    if(modulo.keyword.value == ""){
        alert("Campo -keyword- mancante. \n Modulo non spedito. ");
        modulo.titolo.focus;
        return false;
    }
    if(modulo.autore.value == ""){
        alert("Campo -autore- mancante. \n Modulo non spedito. ");
        modulo.autore.focus;
        return false;
    }
    if(modulo.prezzo.value == ""){
        alert("Campo -prezzo- mancante. \n Modulo non spedito. ");
        modulo.prezzo.focus;
        return false;
    }
}
</script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Catalogo</title>
    <style type="text/css" media="screen">
        @import url("public/css/main.css");
    </style>
</head>
<body>
    <div id="header">
        <div class="headcontent">
            <h1>Libreria Online / Catalogo</h1>
            <% if(user == null) { %>
            <h2>Non sei loggato. <a href="/secondoesercizio/loginin.jsp">Loggati</a>.</h2>
            <% } else { %>
            <h2>Sei loggato come: <%= user.getNome() %>. <a href="Controllore?action=logout">Esci</a>.</h2>
            <% } %>
        </div>
    </div>
    <div id ="content">
        <div class="search">

        <form name="ricerca" onSubmit="return verifica(this);" action="Controllore" method="POST">
            <input type="hidden" name="action" value="cerca">   
            <p>Parola chiave : <input type="text" name="keyword"></p> 
            <p>Tipo richiesta : 
            <select name=reqtype>
                <option>titolo</option>
                <option>autore</option>
            </select>
            </p>                    
            <p><input type="submit" name="Submit" value="Cerca"></p>
        </form>

        <span><a href="/secondoesercizio/prenotazioni.jsp">Prenotazioni.</a></span>

        </div>
        <table border="1">
        <tr>
            <th>Titolo</th>
            <th>Autori</th>
            <th>Prezzo</th>
            <th>Prenota</th>
            <th>Modifica</th>
            <th>Elimina</th>
        </tr>

        <%  

            Modello lista = (Modello) request.getAttribute("searchmodel");
            if(lista == null){
                lista = new Modello();
            }

            List<Modello> risultato = lista.getCatalogo();
            Iterator<Modello> iteratore = risultato.listIterator();
            int cont = 0;
            while(iteratore.hasNext()){
                Modello esaminato = iteratore.next();
                cont++;
                if(cont%2 == 0){
        %>
                    <tr class="greenback">
        <%      } else {  %>
                    <tr>
        <%      }         %>

            <td><b><%= esaminato.getTitolo() %></b></td>
            <td><%= esaminato.getAutori() %></td>
            <td><%= esaminato.getPrezzo() %></td>

            <td><form name="prenotaform" onSubmit="return verifica(this);" action="Controllore" method="POST">
            <input type="hidden" name="action" value="prenota">
            <input type="hidden" name="idlibro" value="<%= esaminato.getId() %>"> 
            Quantita : <input type="text" name="quantita" SIZE="3" value=1> 
            <input type="submit" name="Submit" value="Prenota">
            </form>
            </td>

            <td><form action="Controllore" method="POST">
            <input type="hidden" name="action" value="modifica">
            <input type="hidden" name="idlibro" value="<%= esaminato.getId() %>">
            <input type="submit" name="Submit" value="Modifica">
            </form>
            </td>

            <td><form action="Controllore" method="POST">
            <input type="hidden" name="action" value="elimina">
            <input type="hidden" name="idlibro" value="<%= esaminato.getId() %>">
            <input type="submit" name="Submit" value="Elimina">
            </form>
            </td>

        </tr>
        <% } %>
        </table>

        <div class="search">
            <form name ="aggiungi" onSubmit="return verifica(this);" action="Controllore" method="POST">
                <input type="hidden" name="action" value="nuovolibro">
                <p>Titolo : <input type="text" name="titolo"></p> 
                <p>Autori: <input type="text" name="autori"></p> 
                <p>Prezzo : <input type="text" name="prezzo"></p> 
                <p><input type="submit" name="Submit" value="Aggiungi"></p>
            </form>
        </div>

    </div>
</body>
</html>

我在broswer中运行jsp页面。如果我错过了这种形式的关键字表单字段:

<form name="ricerca" onSubmit="return verifica(this);" action="Controllore" method="POST">
            <input type="hidden" name="action" value="cerca">   
            <p>Parola chiave : <input type="text" name="keyword"></p> 
            <p>Tipo richiesta : 
            <select name=reqtype>
                <option>titolo</option>
                <option>autore</option>
            </select>
            </p>                    
            <p><input type="submit" name="Submit" value="Cerca"></p>
        </form>

显示消息框,但在此之后,页面只执行提交命令并且不会停止预期的方式。我无法向您提供更多信息,因为我在Eclipse中开发了本地的网站。

1 个答案:

答案 0 :(得分:2)

modulo.prezzo.focus;

http://www.w3schools.com/jsref/met_html_focus.asp

焦点是一种功能。它将被称为focus()。