Change border color of input if empty on button click
<p>I am trying to use jquery to change the border color of an element when it is not empty. From what I've looked up everything seems right, but I still can't seem to get it to work. </p>

<p>Here is my JS fiddle: <a href="https://jsfiddle.net/jessica_mather123/ez3tgnvc/1/" rel="nofollow">https://jsfiddle.net/jessica_mather123/ez3tgnvc/1/</a></p>

<p>HTML</p>

<pre><code>Text &lt;input type="text"&gt;
&lt;button&gt;Click Me&lt;/button&gt;
</code></pre>

<p>JQuery</p>

<pre><code>$("button").on("click",function(){
    if($("[type='text']").val() == null){
        $(this).css("border","2px solid red");
    } 
});
</code></pre>