I have multiple input form but need to * to add in label, not manually add using javascript

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

CodePudding user response：

Reverse the order of the elements (and correct the positioning using CSS), this allows for using the adjacent sibling combinator :

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add a CSS class first and then add it to your input

$('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="">

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>