jQuery only executes if there is a prior javascript before it (??)
<p>I am getting a really weird behaviour where I noticed that jquery only executes if there is a dummy javascript prior to it.    </p>

<ol>
<li><p>With javascript (with alerts command) coded before the jquery scripts    </p>

<pre><code>  &lt;jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
   xmlns:c="http://java.sun.com/jsp/jstl/core"&gt;
  &lt;jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="true" language="java" /&gt;
  &lt;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" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/login.css" /&gt;
&lt;script src="/javascript/jquery-2.2.1.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
alert('x');
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(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("");
    }
});
});
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;header&gt;
&lt;div id="header-center-11x12"&gt;
    &lt;img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
        alt="goeasyhome" /&gt;
&lt;/div&gt;
&lt;/header&gt;

&lt;br /&gt;
&lt;div id="main-content"&gt;
&lt;form method="post" action="j_security_check"&gt;
    &lt;div id="email"&gt;
        &lt;input type="email" placeholder="Email Address" name="j_username"
            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
            required="required" /&gt;
    &lt;/div&gt;
    &lt;div id="password"&gt;
        &lt;input type="password" placeholder="Password" name="j_password"
            required="required" /&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;div id="signin"&gt;
        &lt;input type="submit" value="Sign In" /&gt;
    &lt;/div&gt;
&lt;/form&gt;
&lt;br /&gt; &lt;a class="passwdsignup-color" href="/forgotpassword.jsp"&gt;Forgot
    Password? &lt;/a&gt; &lt;a class="passwdsignup-color signup-position"
    href="/signup.jsp"&gt;Sign Up?&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p></p></li>
</ol>

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

<p><a href="https://i.stack.imgur.com/ZfhFW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZfhFW.png" alt="enter image description here"></a></p>

<ol start="2">
<li><p>With javascripts (alerts command) commented out.    </p>

<pre><code>&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/login.css" /&gt;
&lt;script src="/javascript/jquery-2.2.1.min.js"&gt;&lt;/script&gt;
&lt;!-- &lt;script type="text/javascript"&gt;
       alert('x'); 
&lt;/script&gt; --&gt;
&lt;script type="text/javascript"&gt;
 $(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");
    }
   });

    :
    :
</code></pre></li>
</ol>

<p><a href="https://i.stack.imgur.com/s3cs6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s3cs6.png" alt="enter image description here"></a></p>

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

<p>This is bizzare to me.<br>
Any help would be great.</p>

<p>Here's the jsfiddle <a href="https://jsfiddle.net/yapkm01/3f321g84/" rel="nofollow noreferrer">https://jsfiddle.net/yapkm01/3f321g84/</a></p>