javascript - jQuery 仅当前面有 javascript 时才会执行(??)

我得到了一个非常奇怪的行为，我注意到 jquery 仅在它之前有一个虚拟 javascript 时才执行。

在 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(警报命令)注释掉。

<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/

最佳答案

引用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>

关于javascript - jQuery 仅当前面有 javascript 时才会执行(??)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36075699/

javascript - jQuery 仅当前面有 javascript 时才会执行(??)

上一篇：javascript - 我可以只用 HTML5 实现这个功能吗？

下一篇：加载后Javascript进度条清除值