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

Question

I currently have a page that contains a form and a hidden validation div thats being used for alert: 我目前有一个页面，其中包含一个表单和用于警报的隐藏验证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>

On page load, the alert div is hidden with CSS: 在页面加载时，警报div被CSS隐藏：

#alert{
    display: none;
}

There is a JS validation file that is being used to check if input is empty on submit. 有一个JS验证文件可用于检查提交时输入是否为空。 This JS file cannot be changed. 此JS文件无法更改。

If the input tag is empty when click submit button, the JS will perform a simple jQuery show() function so the div will be visible to the user: 如果单击“提交”按钮时输入标签为空，则JS将执行简单的jQuery show()函数，因此div对用户可见：

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

Now, I cannot modify the "Input is empty!" 现在，我无法修改“输入为空！” string that exist in the span tag, however, I want to change the alert message to "Empty input!". span标记中存在的字符串，但是，我想将警报消息更改为“ Empty input！”。

How do I create a jQuery event to achieve this? 如何创建一个jQuery事件来实现这一目标？ So when I click the Submit button, I will see "Empty input!" 因此，当我单击“提交”按钮时，我将看到“空输入！” instead of "Input is empty!"? 而不是“输入为空！”？

Answer 1

If you can edit the original JS file, simply change the line to this: 如果您可以编辑原始JS文件，只需将其更改为：

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

Otherwise, you can change the span's text when the document loads: 否则，您可以在加载文档时更改跨度的文本：

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

Answer 2

you can use the submit form 您可以使用提交表格

example fiddle 小提琴的例子

jQuery; jQuery;

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

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

Markup 标记

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

you dont need #alert css anymore 您不再需要#alert CSS

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

问题描述

2 个解决方案

解决方案1
0 2016-07-23 01:28:52

解决方案2
0 2016-07-23 01:59:01

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

问题描述

2 个解决方案

解决方案1 0 2016-07-23 01:28:52

解决方案2 0 2016-07-23 01:59:01

解决方案1
0 2016-07-23 01:28:52

解决方案2
0 2016-07-23 01:59:01