0
133
ViewsIn html input label * add detect to required field using JavaScript/jQuery
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="">
·
Juan Pablo Isaza
2 answers
Answer question0
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="">
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question