jQuery只有在它之前有一个先前的javascript时才会执行(??)

时间:2016-03-18 03:39:22

标签: javascript jquery html html5 dom

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

  1. 在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>
    

  2. 当我提交时没有任何数据,例如没有电子邮件地址,弹出正确的验证消息,如下所示。

    enter image description here

    1. 用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. enter image description here

      您会注意到默认消息“请填写此字段”而不是“请填写此字段2”。 jquery命令没有运行。

      这对我来说很古怪 任何帮助都会很棒。

      这是jsfiddle https://jsfiddle.net/yapkm01/3f321g84/

1 个答案:

答案 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>