jeudi 27 avril 2017

How to validate ember-power-select using jquery validation?

I have a power-select that I want to validate. When user presses submit, I want them to have selected from the power-select dropdown. If they have not selected from the dropdown, then it would show a warning. I am using ember-power-select for dropdown and jquery-validation for validation.

Below is what my ember template (component) has - I included a text input (amount) that works:

//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"
    ...

Inside my 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);
      }
    });
    ...
  }

Currently, if I don't select anything, it shows error under amount, but it does not show anything under organization. I noticed that when I inspected power-select, it has a fixed power-select id. Both my required='required' andname='organization` lines were not shown either.

ember-power-select-inspect

Compare that with Amount, where it has the specified name, id, and required. I think this is the reason why, but I am not 100% sure.

amount input text inspect

In short, how can I enable basic validation on ember-power-select so it shows error message when user does not select from dropdown?




Aucun commentaire:

Enregistrer un commentaire