jQuery only executes if there is a prior javascript before it (??)

Question

I am getting a really weird behaviour where I noticed that jquery only executes if there is a dummy javascript prior to it.

With javascript (with alerts command) coded before the jquery scripts

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

When i submit without any data e.g. no email address, the correct validation message pops up as shown below.

With javascripts (alerts command) commented out.

<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");
    }
   });

    :
    :

You'll noticed the default message 'Please fill in this field' instead of the 'Please fill in this field 2' is displayed. The jquery command didn't run.

This is bizzare to me.
Any help would be great.

Here's the jsfiddle https://jsfiddle.net/yapkm01/3f321g84/

It works in my fiddle. https://jsfiddle.net/bikashm/46axLp7L/ — Bikee, Mar 18 '16 at 04:00
Which browsers have you tried? The fiddle works fine for me in Firefox/win — Vitani, Mar 18 '16 at 11:28
@Jocie No. Here's the jsfiddle .. https://jsfiddle.net/yapkm01/3f321g84/ — yapkm01, Mar 18 '16 at 14:30
@Quentin select the jquery on the javascript function. seems working here but not on my end — yapkm01, Mar 18 '16 at 14:50
Selecting either jQuery 1.12.1 or 2.2.1 shows the "2" error message for me in Firefox. It might be a daft question, but have you tried rebooting? — Vitani, Mar 18 '16 at 15:04

Bikee · Accepted Answer · 2016-03-18T14:42:16.013

1

Refer the jquery to the code. I've pasted the whole page here. It works great. Please let me know.

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

edited Mar 18 '16 at 14:42

answered Mar 18 '16 at 07:32

Bikee

1,197
8
21

Do you get any errors? can you check in browser's console? – Bikee Mar 18 '16 at 14:03
@yapkm01 — "Uncaught ReferenceError: $ is not defined" – Quentin Mar 18 '16 at 14:36
@BikashSinghMaharjan — "I've pasted the whole page here. It works great." — What did you change to fix the problem? It sounds like you are just saying you couldn't reproduce the problem, which is something you should put in a comment, not an answer. – Quentin Mar 18 '16 at 14:37
@yapkm01, you forgot to link jquery. In your fiddle, please go to javascript window, click Javascript button on top right and choose the preferred jquery version and run the code. Good luck. – Bikee Mar 18 '16 at 14:39
@Quentin, it's certainly the problem of not linking jquery. – Bikee Mar 18 '16 at 14:40
@BikashSinghMaharjan Yeah .. seems working here but still not working on my code .. there's no error on my script console – yapkm01 Mar 18 '16 at 14:49
@BikashSinghMaharjan I have added the JSP directive to the top of the code. Could it be due to that? – yapkm01 Mar 18 '16 at 14:54
Could be on the top of the page. What's there in your side? – Bikee Mar 18 '16 at 15:00
@BikashSinghMaharjan i've modified the code showing the JSP directive .. check it out on the revised code – yapkm01 Mar 18 '16 at 15:02
What does the rendered HTML look like (i.e. in Firefox right click > View Page Source)? – Vitani Mar 18 '16 at 15:03
@Jocie On firefox .. i see highlighted in red .. (almost standard mode doctype .. ) – yapkm01 Mar 18 '16 at 15:07
Can you copy & paste the whole source into you OP? It might be worth trying ` ` (The HTML 5 doc type) – Vitani Mar 18 '16 at 15:10
Not much sure about jsp and html5 :( . But can you have a look into this: http://stackoverflow.com/questions/3147799/why-do-we-need-doctype-to-the-html-jsp-pages and this http://stackoverflow.com/questions/24903273/html5-code-not-running-in-jsp-file Might help you :) – Bikee Mar 18 '16 at 15:12
@Jocie Bingo. Thanks. The needed to make this work. – yapkm01 Mar 18 '16 at 15:48
Glad I and @BikashSinghMaharjan could help, don't forget to accept Bikash's answer! – Vitani Mar 18 '16 at 16:03

jQuery only executes if there is a prior javascript before it (??)

1 Answers1