使用jQuery将星号添加到必填字段

时间:2016-09-14 05:44:37

标签: javascript jquery angularjs

我有一个表单字段,如下所示,其他人也喜欢这样。

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

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':{
                },
        }
  };

我想在Org的可选字段为&#34; false&#34;的字段中添加星号。但不使用ng-if。

请帮帮我。谢谢

1 个答案:

答案 0 :(得分:0)

为什么要通过Jquery添加它?你也可以使用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>