我得到了一个非常奇怪的行为,我注意到只有在它之前有一个虚拟的javascript时才会执行jquery。
在jquery脚本
之前编码javascript(带警报命令) <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="true" language="java" />
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
alert('x');
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</head>
<body>
<br />
<br />
<br />
<header>
<div id="header-center-11x12">
<img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
alt="goeasyhome" />
</div>
</header>
<br />
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
Password? </a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
当我提交时没有任何数据,例如没有电子邮件地址,弹出正确的验证消息,如下所示。
用javascripts(alerts命令)注释掉了。
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<!-- <script type="text/javascript">
alert('x');
</script> -->
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
:
:
您会注意到默认消息“请填写此字段”而不是“请填写此字段2”。 jquery命令没有运行。
这对我来说很古怪 任何帮助都会很棒。
这是jsfiddle https://jsfiddle.net/yapkm01/3f321g84/
答案 0 :(得分:1)
将jquery引用到代码中。我在这里粘贴了整个页面。它很棒。请告诉我。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">
Forgot
Password?
</a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<script type="text/javascript">
//alert('x');
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</body>
</html>