javascript - 存在无效类时更改字段占位符文本

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

当前不更改占位符。

标签： javascriptjqueryhtmlforms

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>