[英]Add asterisk only if label text is available
I am trying to add an asterisk to a label text of an input, if the input filed is required
.如果输入字段是
required
的,我正在尝试向输入的 label 文本添加一个星号。 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.但是,我不希望为 label 文本不可用的输入字段添加星号。
Look at the following where a label text is not available;请看以下 label 文本不可用的地方;
<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 文本可用的情况相反
<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.我的 jQuery 脚本在输入元素前添加了星号。 But the desired output is as follows;
但是想要的output如下;
Can anyone help me achieve this?谁能帮我实现这个目标? TIA
TIA
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.如果这是包含标签的方式,那么您可以克隆每个
<label>
元素并删除其子元素,然后检查是否还有任何文本。 This is what I mean (I am not familiar with jQuery, so I will write in vanilla JS):这就是我的意思(我对jQuery不熟悉,所以我会用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]);
}
}
You can use .each
loop to iterate through all required inputs then using .clone
& .text()
get the label texts
ignoring all children it has.您可以使用
.each
循环遍历所有必需的输入,然后使用.clone
& .text()
获取 label texts
,忽略它拥有的所有子项。 Then, if the length of text is greater then 0
append your span.然后,如果文本的长度
greater then 0
append 你的跨度。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.