Question

我目前有一个页面，其中包含用于提醒的表单和隐藏的验证div：

<body>
   <form id="1">
       <input id="2">
       <button id="submitButton" type="button">Submit</button>
   </form>


   <div id="alert">
       <span>Input is empty!</span>
   </div>

</body>

在页面加载时，使用CSS隐藏警报div：

#alert{
    display: none;
}

有一个JS验证文件用于检查提交时输入是否为空。无法更改此JS文件。

如果单击“提交”按钮时输入标记为空，则JS将执行简单的jQuery show()函数，以便用户可以看到div：

if(isEmptyField){
  $('#alert').show();
}

现在，我无法修改“输入为空！”但是，我希望将警报消息更改为“清空输入！”。

如何创建jQuery事件来实现这一目标？所以当我点击提交按钮时，我会看到“空输入！”而不是“输入是空的！”？

Answer 1

如果您可以编辑原始JS文件，只需将该行更改为：

$('#submitButton').click(function() {
    if (isEmptyField) {
        $('#alert span').text("Empty input!").show();
    }
});

否则，您可以在文档加载时更改范围文本：

$(document).ready(function() {
    $('#alert span').text("Empty input!");
});

Answer 2

您可以使用提交表单

示例fiddle

jQuery的;

$( "form" ).submit(function( event ) {
  if ( $( "input" ).val() == "" ) {
    $( "span" ).text( "Input is empty!" ).show();
    return false;
  }

  $( "span" ).text( "Thanks" ).show().fadeOut( 2000 );
  event.preventDefault();
});

标记

<body>
   <form id="1">
       <input id="2">
       <button id="submitButton" type="submit">Submit</button>
   </form>
   <div id="alert">
       <span></span>
   </div>
</body>

你不再需要#alert css

使用jQuery动态修改提交表单上的输出警报内容

2 个答案: