具有清除功能的輸入字段驗證

Question

我正在創建帶有驗證的表單。 例如，我有一個輸入字段和提交按鈕，看起來像：

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

謝謝您的幫助！

Answer 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

Answer 2

這是我要怎么做：

在輸入字段的onclick事件中，您驗證code_required（布爾變量）是True還是False（默認為False）

當用戶按下提交按鈕時，您將驗證文本是否為空。 如果是這樣，則將變量code_required設置為True，然后編寫紅色消息。

當他再次單擊時，該函數將驗證布爾值是True還是False，然后執行適當的操作（如有必要，請清除該字段）。 然后，您可以將布爾值重新分配為False