Поле ввода с ясной функцией

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 ТРЕБУЕТСЯ» будет новое значение в красном тексте внутри поля ввода.

Когда пользователь нажимает на поле для редактирования, красный текст ошибки исчезнет, ​​и они могут ввести свой индексный код.

Я ТОЛЬКО хочу, чтобы поле ввода очищалось, когда появляется сообщение об ошибке. Имеет ли это смысл?

Это то, что у меня есть до сих пор, и я очень новичок в jQuery. Когда вы нажимаете сообщение об ошибке, оно исчезает, но когда вы вводите новый почтовый индекс, щелкните и зайдите обратно, новый почтовый индекс исчезнет!

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

Вот как я бы это сделать:

В OnClick случае поля ввода, вы убедитесь, если code_required (логическую переменную) является истинным или ложным (False по умолчанию)

Когда пользователь нажмите кнопку отправки, вы подтвердите, что текст пуст. Если это так, вы поместите переменную code_required в True, и вы напишите свое красное сообщение.

Когда он снова нажимает кнопку, функция проверяет, является ли логическое значение «Истина» или «Ложь», а затем выполните соответствующую операцию (также удалите поле, если необходимо). Затем вы можете переназначить свое логическое значение до False

Answer 2

$(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