如何使用.show（）和.hide（）方法在.click（）上显示错误日志？

Question

我创建了一个页面，在该页面上，要求用户通过插入名称，地址或电话号码进行搜索查询，该名称，地址或电话号码分别对应于三个导航选项卡（“名称”，“地址”和“号码”），每个它们中的一个与输入文本表单和一个“搜索”按钮关联。

我现在要做的是在用户点击“搜索”按钮而未填写相应字段时显示错误日志。 >。例如，如果用户在“名称”选项卡上并单击“搜索”按钮，则会显示错误消息“请输入名称”。

我将错误消息包含在html文件的<p>标记中，并且仅在以下两种情况下，我想使用JQuery .show()和.hide()方法显示这样的消息同时发生： 1）该字段为空； 2）点击按钮。 否则，该消息将被隐藏。

这是我的Javascript代码段，不适用于我的目的：

    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());

#ID分别对应：

• inlineFormInputName =输入表单的ID-第一个Tab；

• searchName =按钮ID-第一个选项卡；

• errorLog =包含错误消息的<p>的ID

• inlineFormInputAddress =对应于2ndTab的输入表单的ID；

• searchAddress =按钮ID-第二个标签；

• inlineFormInputTelefono =与第三个选项卡相对应的输入表单的ID；

• searchPhone =按钮ID-第三个标签。

我上传了一个网页屏幕：

仅当使用JQuery .show()和.hide()方法满足两个条件时，如何显示错误消息？

Answer 1

如果您的代码更改很少...

用过的东西叫做“三元运算符”：

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。小心inlineFormInput Telefono和搜索Phone ...可能会在某处弄乱...