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

Question

我下面有这个 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">

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

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

注意：我希望此验证仅使用 jQuery 进行编程。 而不是 PHP，而不是香草 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;
})

Answer 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

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

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

jquery to check a textarea for a particular word and shows a text input (and popover) asking for user input before submitting form

jquery

forms

validation

textarea

popover