emberjs input checkValidity and setCustomValidity

Question

Is there a way to use checkValidity() setCustomValidity() within ember? For example, in my controller upon submission I have:

var inpObj = this.get('name');
if (inpObj.checkValidity() == false) {
    alert('ok');
}

and of course this is my handlebar code:

{{input id="name" type="text" value=name placeholder="Your Name" required="true"}}

Upon submission of this, I get this error message:

inpObj.checkValidity is not a function

score 0 · Answer 1 · answered Nov 19 '15 at 16:04

0

You would need to get HTML5 element instead of string to call checkValidity function.

var inpObj = this.get('name'); // this is only a string

You can use jQuery instead:

var inpObj = Ember.$('#name')[0];

if (inpObj.checkValidity() == false) {
  alert('ok');
}

Working demo.

answered Nov 19 '15 at 16:04

Daniel Kmak

18,164
7
66
89

Solution Works! ... I was hoping to avoid using jQuery if at all possible. Question, what does Ember.$ do ? why not just use $ – Matt Nov 19 '15 at 16:13
`Ember.$` is another way to access jQuery if you don't want to access it using global variable `$`. You could avoid jQuery if you would create another component which extends from `Ember.TextField` and integrating validity checks inside it, then propagating information via actions to controller. – Daniel Kmak Nov 19 '15 at 16:23

score 0 · Answer 2 · answered Nov 19 '15 at 19:13

If you want to avoid jQuery, you could set an action on your submit button that runs the valid check for you.

<button {{action "submitForm"}}>Your Button</button>

Then have an action in your contoller:

actions: {
  submitForm() {
    var inpObj = this.get('name');
    if(!inpObj.checkValidity()) {
      // error handling
      alert('ok');
    } else {
      // save your data, or whatever you need to do
      this.transitionTo('some.route');
    }
  }
}

emberjs input checkValidity and setCustomValidity

2 Answers2