Question

我有以下表格：

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<% session.invalidate(); %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hi</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css">
<script type="text/javascript" src="/js/custom.modernizr.js"></script>
</head>
<body>

<div class="row" style="height: 150px;">&nbsp;</div>

<div class="row">
    <div class="radius panel large-6 small-6 columns small-centered large-centered">
        <div><h2>Hi</h2></div>
        <div id="loginMessage" class="loginError">${loginMessage}</div>
        <form:form commandName="loginForm" id="loginForm" name="loginForm" method="post" action="/do/authenticate" class="custom">
            <form:label path="email">Email:</form:label>
            <form:input path="email"/>
            <form:label path="password">Password:</form:label>
            <form:input path="password" type="password"/>
        </form:form>

        <div class="row">
            <div class="large-offset-6 small-offset-6 large-6 small-6 columns" style="text-align: right;">
                <a href="/do/register"><button class="tiny button">Register</button></a>
                <a href="/do/getpwd" style="margin-left: 5px;"><button class="tiny button">Reset</button></a>
                <button class="small success button" style="margin-left: 5px;" onclick="document.forms[0].submit();">Login</button>
            </div>
        </div>
    </div>
</div>

<div id="IE8Modal" class="reveal-modal">
  <h2>We're Sorry</h2>
  <p class="lead">This site does not support older versions of Internet Explorer</p>
  <p>We recommend you upgrade to a modern browser, such as <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a></p>
  <a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/foundation.min.js"></script>
<script type="text/javascript" src="/js/login.js"></script>
<script>
    var isIE8 = false;

    if (document.all && document.querySelector && !document.addEventListener) {
        isIE8 = true;
    }

    if (isIE8) {
        $('#IE8Modal').foundation('reveal', 'open');
    }
</script>

注意，当编译这个jsp时，那些

        <form id="loginForm" name="loginForm" class="custom" action="/do/authenticate" method="post">
            <label for="email">Email:</label>
            <input id="email" name="email" type="text" value=""/>
            <label for="password">Password:</label>
            <input id="password" name="password" type="password" value=""/>
        </form>

以下/js/login.js：

$(document).ready(function () {

$(document).foundation();  

$("#loginForm").validate({
    rules: {
        email: { required: true, minlength: 6, maxlength: 40 },
        password: { required: true, minlength: 8, maxlength: 40 }
    },
    messages: { 
        email: { required: "Please enter an email address", minlength: "Email address must be at least 6 characters long" },
        password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long" }
    }
});
});

它没有验证。它提交，控制台中没有消息。

Answer 1

没有jQuery .exists()这样的东西，除非你有一个插件或定义它的函数。没有必要使用jQuery测试元素的存在，因为它会自动执行。

$(document).ready(function() {

    // if ($("#loginForm").exists()) { // <-- remove this invalid method

        $("#loginForm").validate({
            // ...

由于您的按钮位于form之外，请使用click处理程序触发提交。

$('#login').click(function() {
    $("#loginForm").submit();
});

HTML：

<button id="login" class="small success button" style="margin-left: 5px;">Login</button>

DEMO：http://jsfiddle.net/fJnpX/1/

jQuery验证不验证

1 个答案: