具有明确功能的输入字段验证

时间:2013-09-13 19:29:24

标签: javascript jquery forms input onclick

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

<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');
        });
    }
}

感谢您的帮助!

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

以下是我将如何做到这一点:

在输入字段的onclick事件中,验证code_required(布尔变量)是True还是False(默认为False)

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

当他再次点击时,该函数将验证布尔值是True还是False,然后执行相应的操作(如果需要,也可以删除该字段)。然后,您可以将布尔值重新分配给False