我有一个我要验证的电源选择。当用户按下提交时,我希望他们从电源选择下拉列表中选择。如果他们没有从下拉列表中选择,那么它会显示警告。我使用ember-power-select
进行下拉,jquery-validation
进行验证。
以下是我的余烬模板(组件)的内容 - 我包含了一个有效的文本输入(amount
):
//emblem.js
form id="salesForm"
.form-group
label Account Name (Organization)
= power-select options=organizations selected=sale.organization searchField="name" onchange=(action "organizationChanged" ) placeholder="Account Name" required="required" name="organization" id="organization" as |organization|
= organization.name
.form-group
label Amount
= input type="text" value=sale.amount placeholder="Amount" class="form-control" required="required" name="amount" id="amount"
...
在我的component.js中:
didRender(){
...
var validator = this.$('#salesForm').validate({
rules: {
organization: {
required: true
},
amount: {
required: true
}
},
messages: {
organization: {
required: "Please select an organization"
},
amount: {
required: 'Please enter amount number'
}
},
errorPlacement: function(error, element){
error.insertAfter(element);
}
});
...
}
目前,如果我没有选择任何内容,则会在amount
下显示错误,但在organization
下不会显示任何内容。我注意到当我检查电源选择时,它有一个固定的电源选择ID。我的required='required' and
name ='organization`行也未显示。
代码:
<div aria-haspopup="true" class="ember-basic-dropdown-trigger ember-power-select-trigger" id="ember-power-select-trigger-ember1017" tabindex="0" role="button" aria-disabled="false" aria-expanded="true" aria-pressed="true" aria-controls="ember-basic-dropdown-content-ember1026">
<span class="ember-power-select-placeholder">Account Name</span>
<span class="ember-power-select-status-icon"></span>
</div>
将其与Amount
进行比较,它具有指定的name, id, and required
。我认为这就是原因,但我不是百分百肯定。
代码:
<input id="amount" placeholder="Amount" required="" name="amount" type="text" class="form-control ember-view ember-text-field error" aria-required="true">
简而言之,如何在ember-power-select上启用基本验证,以便在用户不从下拉列表中选择时显示错误消息?