具有清除功能的输入字段验证答案

【问题标题】：Input Field Validation with clear function具有清除功能的输入字段验证
【发布时间】：2013-09-13 19:29:24
【问题描述】：

我正在创建一个带有验证的表单。例如，我有一个输入字段和提交按钮，如下所示：

<input name="Zip" maxlength="5" id="Zip" value="" />
<a class="form-submit submit-btn" href="javascript:void(0);" style="display: block;">Proceed</a>

使用 jQuery，如果输入字段为空并且他们尝试提交我希望“Zip is required”成为输入字段内 RED 文本中的新值。

当用户单击要编辑的字段时，红色错误文本将消失，他们可以输入他们的邮政编码。

我只希望输入字段在出现错误消息时清除 onclick。这有意义吗？

这是我目前所拥有的，我对 jQuery 还是很陌生。当您单击错误消息时消失，但当您输入新的 zip 时，单击退出并单击返回，新的 zip 将消失！

if($('#Zip').val() == ''){
    $('#Zip').val('Zip is Required');
    $('#Zip').css('color', 'red');
    if($('#Zip').val() == 'Zip is Required'){  
        $('#Zip').click(function() {
            $('#Zip').val('');
            $('#Zip').css('color', 'black');
        });
    }
}

感谢您的帮助！

【问题讨论】：

@LeeMeador 不，它没有。我无法让文字停止消失。我已经用我现在拥有的内容编辑了我的帖子。谢谢。

标签： javascript jquery forms input onclick

【解决方案1】：

 $(document).ready(function() {
        ///this section clears any text typed inside the box if the user decides to type again
       $('#Zip').click(function()
      {
          if(isNaN(CheckZip))
          {
            $('#Zip').val('');
           }
      });

///This section does the security checking to see if the input is empty and add the required text
$('.submit-btn').click(function()
      {
          var CheckZip = $('#Zip').val();
          if(!CheckZip)
          {
            $('#Zip').val('Zip is Required');
          }
      });
      ///Let me know if I`m missing anything

【讨论】：

看起来 OP 想要将“黑色”添加到顶部（点击功能）和“红色”添加到底部（提交按钮）
啊，好吧，我会把那一点扔进去

【解决方案2】：

我会这样做：

在输入字段的 onclick 事件中，您验证 code_required（一个布尔变量）是 True 还是 False（默认为 False）

当用户按下提交按钮时，您验证文本是否为空。如果是这样，则将变量 code_required 设置为 True 并编写红色消息。

当他再次单击时，该函数将验证布尔值是 True 还是 False，然后执行适当的操作（也就是必要时擦除该字段）。然后，您可以将布尔值重新分配为 False

【讨论】：