在 html 中輸入 label * 使用 JavaScript/jQuery 將檢測添加到必填字段

Question

我有多個輸入形式，但需要 * 添加到 label，而不是使用 javascript 手動添加

 <label for="form_name">Firstname</label>
    <input id="form_name" type="text" name="name" class="form-control" placeholder="Firstname" required="">

Answer 1

首先添加一個 CSS class 然后將其添加到您的輸入

 $('input[required]').each(function(){ $($(this).parent()).find('label').addClass('required') //depending on the structure of your fields });

 .required:after{ color:red; content:" * "; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="form_name">First name</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="First name" required="">

Answer 2

反轉元素的順序（並使用 CSS 更正定位），這允許使用相鄰的兄弟組合符+ ：

 .form-group { display: grid; grid-template-areas: "label" "input"; }:required+label::after { content: " *"; color: teal; }.form-group label { grid-area: label; }.form-group.form-control { grid-area: input; }

 <div class="form-group"> <input id="form_name" type="text" name="name" class="form-control" placeholder="Firstname" required=""> <label for="form_name">Firstname</label> </div>