How to use jquery-validation on emberjs properly?

Question

I am trying to create a simple validation to require name (will add more validations later). The app an ember app, and we want to use jquery validation.

I am having trouble just to get a basic validation running. This is what I have:

//index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

... 
//body and such//
...

<script>
  $('#salesForm').validate();
</script>

</body>

Inside a component, say sales-form:

//app/components/sales-form/template.emblem

form id="salesForm"
  ...
  .form-group
    label Some Sales Info
      = input type="text" disabled=false value=salesNumber placeholder="Sales Number" class="form-control" required

  button{action: 'clickNSave'}
  ...

This gives me a build error, because emblem does not recognize required on the input.

How can I create a simple validation using jquery-validation on ember app that uses emblem for template?

Additional question, is my validation on index.html correct, to run the validation at the very end, right before closing body tag? If not, where is the best way to insert $('#someForm').validate();?

Answer 1

This gives me a build error, because emblem does not recognize required on the input.

What about required="required" or required=required? Otherwise, I have no idea how you're supposed to add this attribute using Ember.js.

... to run the validation...

You are not "running" validation. You are "initializing" the jQuery Validate plugin on your form.

... at the very end, right before closing body tag? If not, where is the best way to insert $('#someForm').validate();?

$('#someForm').validate() simply gets called inside a DOM ready handler and it doesn't matter if it's at the top, bottom, or anywhere else, as long as it's called after you include jQuery and the plugin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

....

<script>
    $(document).ready(function() {   // ensures DOM is fully constructed
        $('#someForm').validate();   // initialize the plugin on #someForm
    });
</script>

Otherwise, if you put in the head without a DOM ready handler, the form is not yet rendered in the DOM and your call to .validate() will fail.

How can I create a simple validation using jquery-validation on ember app that uses emblem for template?

I don't see where you ever assign a name attribute to the input element. The jQuery Validate plugin mandates that any form element being validated must contain a unique name attribute.

= input type="text" name="sales_number" required="required" disabled=false value=salesNumber placeholder="Sales Number" class="form-control" 

Refer to the documentation as well as the SO wiki page for more information on correct usage of this plugin.