如何使用jquery验证验证ember-power-select?

时间:2017-04-27 19:10:58

标签: jquery ember.js jquery-validate

我有一个我要验证的电源选择。当用户按下提交时,我希望他们从电源选择下拉列表中选择。如果他们没有从下拉列表中选择,那么它会显示警告。我使用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`行也未显示。

ember-power-select-inspect

代码:

<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。我认为这就是原因,但我不是百分百肯定。

amount input text inspect

代码:

<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上启用基本验证,以便在用户不从下拉列表中选择时显示错误消息?

0 个答案:

没有答案