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' and
name='organization` lines were not shown either.
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.
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