[英]Add an asterisk to the required fields using jQuery
I have a form field as shown below and others like that too.我有一个如下所示的表单字段和其他类似的字段。
<div class="form-group" ng-show="!role.vacancies">
<label for="vacancies" class="col-md-3 control-label"> VACANCIES </label>
<div class="col-md-9">
<input name="vacancies" type="text" id="vacancies" ng-model="Org.vacancies" placeholder="VACANCIES" class="form-control">
</div>
</div>
The Org variable is as follows: Org 变量如下:
var Org = {
validate : {
'planCode':{
'optional' : 'false',
'validation' : 'required',
},
'organizationCode':{
'optional' : 'false',
'validation' : 'required',
},
'vacancies':{
'optional' : 'false',
'validation' : 'number required',
'allowing' : 'range[1;100]',
},
'planDate':{
'optional' : 'false',
'validation' : 'required date',
'format' : 'MM/dd/yyyy',
},
'priorityCode':{
'optional' : 'false',
'validation' : 'required',
},
'description':{
},
'statusCode':{
},
}
};
I want to add an asterisk to the fields in which the optional field of Org is "false" but not using ng-if.我想在 Org 的可选字段为“false”但不使用 ng-if 的字段中添加一个星号。
Please help me out.Thanks请帮帮我。谢谢
Why you want to add it via Jquery ?为什么要通过 Jquery 添加它? You can do this using CSS also.
您也可以使用 CSS 来做到这一点。
input:required { position: relative; } input:required { vertical-align: top; background: url('https://cdn3.iconfinder.com/data/icons/fatcow/16/asterisk_orange.png') no-repeat center right; background-size: 16px 16px; padding-right: 20px; /* so text doesn't overlap with asterisk mark image */ }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group" ng-show="!role.vacancies"> <label for="vacancies" class="col-md-3 control-label">VACANCIES</label> <div class="col-md-9"> <input name="vacancies" type="text" id="vacancies" ng-model="Org.vacancies" placeholder="VACANCIES with required" class="form-control" required> </div> </div> <div class="form-group" ng-show="!role.vacancies"> <label for="vacancies" class="col-md-3 control-label">VACANCIES</label> <div class="col-md-9"> <input name="vacancies" type="text" id="vacancies-1" ng-model="Org.vacancies" placeholder="VACANCIES not required" class="form-control"> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.