jquery 检查特定单词的文本区域并在提交表单之前显示文本输入（和弹出框）要求用户输入答案

【问题标题】：jquery to check a textarea for a particular word and shows a text input (and popover) asking for user input before submitting formjquery 检查特定单词的文本区域并在提交表单之前显示文本输入（和弹出框）要求用户输入
【发布时间】：2016-09-18 15:15:37
【问题描述】：

我在下面有这个 html 页面：

<form name="form1" action="hhhhh.php">
  <table cellpadding="2" cellspacing="8">
    <tr>
      <td>
        <textarea name="message" id="wysiwygeditor" placeholder="enter message here..."></textarea>
      </td>
      <td>second content</td>
      <td>third content</td>
    </tr>
    <tr>
      <td>
        <input type="text" id="phrase" id="phrase" placeholder="your desired password">
      </td>
      <td>fifth content</td>
      <td>sixth content</td>
    </tr>
  </table>
</form>

<input type="submit" name="submit2" id="submit2" value="Send Message">

以上页面用于手动注册用户，期望的行为：

页面加载和 input[type='text'] 字段默认隐藏
用户开始在 textarea 框中输入内容
如果检测到“注册”一词，则 input[type='text'] 变为可见并且提交按钮变为不可点击。然后在 input[type='text'] 字段的右侧出现一个弹出框，显示一条消息，供用户输入所需的用户名和密码。
一旦将任何单词/字符/字符串/数字或任何内容输入到现在可见的输入[type='text'] 中，提交按钮就会再次变为可点击。
1. 现在，用户终于可以继续提交此表单了。

注意：我希望此验证仅使用 jQuery 进行编程。不是 PHP，不是 vanilla javascript，因为我希望它可以跨浏览器压缩。

到目前为止，我对 jQuery 的尝试如下所示：

$("#submit2").on('click', function(el) {
  if ($('#wysiwygeditor').val().indexOf('register') > -1) {
    if (!$('#phrase').val()) {
      $('#phrase').popover({
        title: 'Warning!',
        content: 'Value can not be empty. What is your desired username for registration?',
        placement: 'right'
      }).popover('show');
      el.preventDefault();
      return false;
    } else {
      $('#phrase').popover('destroy');
      return true;
    }
  } else {
    $('#phrase').popover('destroy');
  }
  return true;
})

【问题讨论】：

标签： jquery forms validation textarea popover

【解决方案1】：

您希望根据文本区域的值显示和隐藏文本框，因此您应该将代码添加到与文本区域相关的事件而不是提交按钮，启用或禁用提交按钮也是如此这取决于在文本框中输入内容。

所以这是您可以做的一种解决方案

$("#msg").on('keyup', function() {
    if($(this).val().indexOf("register") > -1){
        $('#phrase').css('display','block');
        $('#submit2').prop('disabled', true);            
        //You can show your popver code here

    }
    else{
        $('#phrase').css('display','none');
        $('#submit2').prop('disabled', false);
        //You hide your popover code here
    }
});
$('#phrase').on('keyup', function() {
    if($(this).val() != '')
        $('#submit2').prop('disabled', false);
});

这里正在为您工作Demo

注意*：我不知道您使用的是哪个弹出框，并且我不确定它是否以您想要的方式工作，所以如果您需要帮助，请更加具体。

【讨论】：