Add asterisk only if label text is available

Question

I am trying to add an asterisk to a label text of an input, if the input filed is required. I used this answer and referred this answer and I can get the desired result using the following code

jQuery(function() {
    jQuery("[required]").before(jQuery("<span>", {
        class: "required"
    }).html("*"));
});

However, I do not want the asterisk to be added for input fields where the label texts are not available.

Look at the following where a label text is not available;

<label>
    <span class="required">*</span>
    <input type="text" class="form-control" id="perm_city" name="perm_city" required="required" />
</label>

as opposed to the following where a label text is available

<label for="clientid">Client ID Number
    <span class="required">*</span>
    <input type="text" class="form-control" id="clientid" name="clientid" required="required" />
</label>

Both has the asterisk added before the input element by my jQuery script. But the desired output is as follows;

Can anyone help me achieve this? TIA

Wais Kamal · Answer 1 · 2020-12-25T12:14:46.977

If this is how your labels are included, then you can clone each <label> element and remove its children, then check if any text remains. This is what I mean (I am not familiar with jQuery, so I will write in vanilla JS):

var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
  var clonedLabel = labels[i].cloneNode(true);
  var chldrn = clonedLabel.children.length;
  for (var j = 0; j < chldrn; j++) {
    clonedLabel.removeChild(clonedLabel.children[0]);
  }
  // Remove spaces
  var innerHTML = clonedLabel.innerHTML.trim();
  if (innerHTML != "") {
    // Add the asterisk
    var span = document.createElement("span");
    span.className = "required";
    span.innerHTML = "*";
    labels[i].insertBefore(span,labels[i].children[0]);
  }
}

Can you point on how to `// Add the asterisk`? – Sid Dec 25 '20 at 11:24 — Sid, Dec 25 '20 at 11:24
Simply call `yourInputFieldLabelText.innerHTML += "*"`. – Wais Kamal Sep 27 '21 at 21:58 — Wais Kamal, Sep 27 '21 at 21:58

score 2 · Accepted Answer · answered Dec 25 '20 at 11:50

You can use .each loop to iterate through all required inputs then using .clone & .text() get the label texts ignoring all children it has . Then , if the length of text is greater then 0 append your span.

Demo Code :

jQuery(function() {
  //loop through required input
  jQuery("[required]").each(function() {
    //get label and remove child only get text
    var cloned = jQuery(this).closest("label").clone().children().remove().end().text().trim();
    console.log("Length--" + cloned.length)
    //check if txt length is > 0 
    if (cloned.length > 0) {
      jQuery(this).before(jQuery("<span>", {
        class: "required"
      }).html("*"));

    }
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>  
    <input type="text" class="form-control" id="perm_city" name="perm_city" required="required" />
</label><br>
<label for="clientid">Client ID Number
    <input type="text" class="form-control" id="clientid" name="clientid" required="required" />
</label><br>
<label for="clientid">Client ID Number1
    <input type="text" class="form-control" id="clientid" name="clientid" required="required" />
</label><br>
<label for="clientid">
    <input type="text" class="form-control" id="clientid" name="clientid" required="required" />
</label>

Add asterisk only if label text is available

2 Answers2