存在无效类时更改字段占位符文本答案

【问题标题】：Changing field placeholder text when invalid class exists存在无效类时更改字段占位符文本
【发布时间】：2020-01-31 14:36:54
【问题描述】：

我有一个简单的表格：

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

目前不更改占位符。

【问题讨论】：

我测试了代码 uo 那里它的 100% 有效问题我主要是在添加无效类后，“查找”功能 dosnt 触发或类似你应该发布完整代码以调试整件事
是的，当您将 'class="not-valid"' 添加到输入标签时，一切似乎都正常。什么时候加课？您可以检查是否添加了课程？您可能会在添加“无效”之前检查“无效”。
在没有标签的输入上执行此操作时，用户可能不知道应该进入该字段的内容，因为它不再提及“名字”。

标签： javascript jquery html forms

【解决方案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>

【讨论】：