How to show an error log on .click() by using the .show() and .hide() methods?

Question

I created a page where the user is asked to do a search query by inserting a name, an address or a phone number, which correspond to three navigation tabs ("Name", "Address" and "Number") and each of them is associated to an input text form and a "Search" button.

What I want to do now is displaying an error log whenever the user clicks on the "Search" button without having filled the corresponding field. For example, if the user is on the "Name" Tab and clicks on the "Search" button, an error message saying "Please insert a name" is displayed.

I included the error message in a <p> tag in the html file and I want to use the JQuery .show() and .hide() methods to show such a message only when the two conditions below occur simultaneously: 1) the field is empty; 2) the button is clicked. Otherwise, the message is hidden.

Here is my Javascript snippet, it doesn't work for my purpose:

    function validateName(){
        if($("#inlineFormInputName").val()==""){
            $("#searchNome").on('click', $("#errorLog").show());
        } 
    }
    function validateAddress(){
        if($("#inlineFormInputAddress").val()==""){
            $("#searchAddress").on('click', $("#errorLog").show());
        }
    }
    function validatePhone(){       
        if($("#inlineFormInputTelefono").val()==""){
            $("#searchPhone").on('click', $("#errorLog").show());
        }
    }
    function main(){
        $("#searchNome").on('click', validateName);
        $("#searchAddress").on('click', validateAddress);
        $("#searchPhone").on('click', validatePhone);
    }

    $(main());

The #ID correspond respectively:

inlineFormInputName = id of the input form - first Tab;
searchName = button ID - firs Tab;
errorLog = id of the <p> containing the error message
inlineFormInputAddress = id of the input form corresponding to the 2ndTab;
searchAddress = button ID - 2nd Tab;
inlineFormInputTelefono = id of the input form corresponding to the 3rd Tab;
searchPhone = button ID - 3rd Tab.

I upload a screen of the webpage:

How may I show an error message only if the two conditions are satisfied, by using the JQuery .show() and .hide() methods?

Callbacks are expected to be function definitions/references. `$(...).show()` is not a function definition. It is a function execution. — Taplar, May 20 '19 at 20:58
Possible duplicate of [Why is the method executed immediately when I use setTimeout?](https://stackoverflow.com/questions/7137401/why-is-the-method-executed-immediately-when-i-use-settimeout) — Taplar, May 20 '19 at 20:59
The duplicate is for timeouts, but both timeouts and event bindings use callbacks. The same error is present there and here. — Taplar, May 20 '19 at 21:00

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

If with minimal changes in your code...

The used thing is called 'Ternary Operator':

JsFiddle

function validateName(){
  ( $("#inlineFormInputName").val().length == 0 ) ? $("#errorLog").show() : $("#errorLog").hide();
}
function validateAddress(){
  ( $("#inlineFormInputAddress").val().length == 0 ) ? $("#errorLog").show() : $("#errorLog").hide();
}
function validatePhone(){
  ( $("#inlineFormInputTelefono").val().length == 0 ) ? $("#errorLog").show() : $("#errorLog").hide();
}

function main(){
  $("#searchNome").on('click', validateName);
  $("#searchAddress").on('click', validateAddress);
  $("#searchPhone").on('click', validatePhone);
}

(main)();

#errorLog {display: none; color: red; margin: 10px;}

<input id="inlineFormInputName">
<button id="searchNome">search</button>
  <br><br>
<input id="inlineFormInputAddress">
<button id="searchAddress">search</button>
  <br><br>
<input id="inlineFormInputTelefono">
<button id="searchPhone">search</button>

<div id="errorLog">bubu!</div>

P.s. Be careful with your inlineFormInputTelefono and searchPhone... can be messed somewhere...

How to show an error log on .click() by using the .show() and .hide() methods?

1 Answers1