Color input's border when nothing is entered doesn't work

Question

I have an input text that has to be something in it for the form to work.

So I wish to add some functionality to the Confirm button that checks if the input field is empty, and if so, recolor the border of that input.

I'm doing the following:

 $(function mainListeners () { "use strict"; var confirm = $('#addNewConfirm'); var cancel = $('#addNewCancel'); var eventBox = $('#eventname_input'); console.log("RUNS!!"); confirm.onclick = function (e) { if (eventBox.val() == ''){ //so if we have an empty event //recolor borders. console.log("CHANGES!!"); eventBox.css('border-color','#d81919'); }else { } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="yesno IFlexible"> <button id="addNewConfirm" >Confirm</button> <button id="addNewCancel">Cancel</button> </div> <div > <label>Event:</label> <input id="eventname_input" type="text" /> </div>

Here I get no errors and I always see the RUNS!! message, so my script is attached. However, I never see the CHANGES!! message, so the condition eventBox.val() == '' is never true. I looked up the internet on how to check if an input text's text is empty, and this is what I found, and it clearly isn't working.

How can I sort out this recolor of border if the input has no text?

Answer 1

Use JQuery click() function instead of onclick like so:

 $(document).ready(function() { var confirm = $("#addNewConfirm"); var cancel = $("#addNewCancel"); var eventBox = $("#eventname_input"); console.log("RUNS!!"); confirm.click(function(e) { if (!eventBox.val()) { console.log("CHANGES!!"); eventBox.css("border-color", "#d81919"); } else { eventBox.css("border-color", 'inherit'); // whatever you want } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="yesno IFlexible"> <button id="addNewConfirm">Confirm</button> <button id="addNewCancel">Cancel</button> </div> <div> <label>Event:</label> <input id="eventname_input" type="text" /> </div>

Answer 2

Try using either the Jquery method of setting a click event (.click()) or the vanilla JS way of retrieving a DOM element(document.getElementById()).

Below is a working example of changes!! getting called.

 $(function mainListeners () { "use strict"; var confirm = document.getElementById('addNewConfirm'); //GET DOM ELEMENTS THIS WAY OR SEE BELOW FOR CLICK var cancel = $('#addNewCancel'); var eventBox = $('#eventname_input'); console.log("RUNS!!"); confirm.onclick = function (e) {//OR CHANGE THIS TO CLICK() if (eventBox.val() == ''){ //so if we have an empty event //recolor borders. console.log("CHANGES!!"); event.css('border-color','#d81919'); }else { } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="yesno IFlexible"> <button id="addNewConfirm" >Confirm</button> <button id="addNewCancel">Cancel</button> </div> <div > <label>Event:</label> <input id="eventname_input" type="text" /> </div>

Answer 3

The fact is that onclick is vanilla Javascript and you are trying to use it on the confirm jQuery object.

In order to fix it, you can use confirm[0].click = function(e) syntax or confirm.click(function (e) . I suggest you to use jQuery syntax: if you load this library you are encouraged to use it in order to strengthen readability.