存在无效 class 时更改字段占位符文本

Question

I have a simple form:

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

If the required field is empty, the class not-valid is added to the input type text. If this not-valid class exists, I'm want to change the placeholder text to something else. So, a sample use case:

• User see's first name textfield (placeholder at this point says "First name *".
• User clicks submit, leaving textfield empty.
• Class not-valid at this point is added to the textfield.
• Placeholder now says "Please complete field" (in place of default placeholder").

Here's what I've got so far:

(function( $ ) {  

    $( document ).ready( function() {

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

    }); 

})( jQuery );

Doesn't change the placeholder currently.

Answer 1

Something like this? (I didnt use the not-invalid class, no need for that, unless you want to add other style to the empty filed)

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