Изменение текста заполнителя поля, когда существует недопустимый класс

Question

У меня есть простая форма:

<form>
  <input type="text" name="firstname" placeholder="First name *" required>
  <input type="submit" value="Submit">
</form>

Если обязательное поле пусто, класс not-valid добавляется к типу ввода текста. Если этот класс not-valid существует, я хочу изменить текст заполнителя на что-то другое. Итак, пример использования:

• Пользователь видит текстовое поле имени пользователя (заполнитель в этот момент говорит: «Имя *».
• Пользователь нажимает кнопку «Отправить», оставляя текстовое поле пустым.
• Класс not-valid в этот момент добавляется в текстовое поле.
• Заполнитель теперь говорит "Пожалуйста, заполните поле" (вместо заполнителя по умолчанию ").

Вот чтоУ меня так далеко:

(function( $ ) {  

    $( document ).ready( function() {

        $('form').find(".not-valid").each(function(ev){
            if(!$(this).val()) { 
                $(this).attr("placeholder", "Please complete field");
            }
        });

    }); 

})( jQuery );

Не меняет местозаполнитель в настоящее время.

Answer 1

Как то так? (Я не использовал недействительный класс, в этом нет необходимости, если только вы не хотите добавить другой стиль в пустое поле)

$('#submit').click(function()
{
    if($('#firstname').val() == ''){
      $('#firstname').attr('placeholder','Please complete field');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="text" id="firstname" name="firstname" placeholder="First name *" required>
  <input type="submit" value="Submit" id="submit">
</form>