CODEWITHSUNDEEP
ember.js
dagda1
dagda1

Reputation: 28810

Emberjs and Validation

How are people handling client side validation and ember?

Is there anything out of the box or a plugin that handles validation or are people just rolling their own?

Upvotes: 25

Views: 10138

Answers (7)

Jav_Rock
Jav_Rock

Reputation: 22245

Another fully supported option and very logical if you are using bootstrap is to use bootstrap-validation plugin. In ember (ember-cli) this should be installed using bower:

bower install --save bootstrap-validation

then in ember-cli-build you must import dependencies:

//bootstrap-validator
  app.import('bower_components/bootstrap-validator/dist/validator.js');
  app.import('bower_components/bootstrap-validator/dist/validator.min.js');

This solution allows you to validate at html level, letting bootstrap do the 'dirty' job. For standard validations this will do the job simple and effortless.

Upvotes: 4

user2733971
user2733971

Reputation: 191

I've had a lot of success with jQuery Validate:

App.MyView = Ember.View.extend({
    templateName: 'my-form-template',
    didInsertElement: function(){
        $("#myForm").validate({
            rules:{
                fname:{
                    required: true,
                    maxlength: 50,
                },
                lname:{
                    required: true,
                    maxlength: 50,
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: 200,
                },
            },
            messages: {
                email: { 
                    email: "Enter a valid email address.",
                },
            },
        });
    }
});

Just using the Ember input helper, it's made my form validation very clean. You can take your jQuery Validate script and place it in a .js file as a function and just call that on didInsertElement.

jQuery Validate adds error messages below your fields with the message relating to the rule, and also allows you to trigger validation from any of your actions or events through the .valid() method.

Upvotes: 3

Suchit Puri
Suchit Puri

Reputation: 394

We have created our own text fields which raise validation errors on focus out, and other events and other text fields extend them:

App.PhoneNumberField = App.TextField.extend({
    validate: function(value) {
        var self = this.$('input');
        var id = self.attr("id");
        var e164PhoneNumber = formatE164("AU",value);
        var valid = true;
        if(self.val().trim().length == 0 ){
            valid = true;
        }else{
            valid = isValidNumber(e164PhoneNumber);
        }
        if (!valid) {
            self.trigger(Storm.invalidInputEvent(id));
            this.setErrorMessage("error","Phone Number does not look right");
        }else {
            self.trigger(Storm.validInputEvent(id));
            this.clearMessages();
        }
    },

    keyUp: function(evt) {
        if(evt.keyCode >= 37 && evt.keyCode <=40)
        {
          return;
        }
        var textValue = this.$("input").val();
        var input = this.$().find('input');
        var formattedNumber = this.formatInput(textValue);
        input.val(formattedNumber);
        this.set('data',formattedNumber);
    },

    value: function() {
        var phoneNumber = this.get('data');
        if (phoneNumber) {
            return phoneNumber;
        } else {
            return "";
        }
    }.property('data'),

    data: null,

    placeholder: function() {
        return "";
    }.property('placeholder'),

    formatInput: function(textValue){
        var formattedPhoneNumber = formatLocal("AU",textValue);
        return formattedPhoneNumber;
    }
});

Upvotes: 2

scotta7exander
scotta7exander

Reputation: 383

I have been handling it in a very similar way to @caligoanimus, but validating on the focus out of the text box and appending an error message.

code:

App.TextFieldEmpty = Ember.TextField.extend({
   focusOut: function() {
      var valid = this.get('value') ? valid = true : valid = false;
      this.$().next(".err").remove();

      if(!valid){
        this.$().addClass("invalid").after("<span class='err'>This field is required</span>");
      } else {
        this.$().removeClass("invalid")
      }
   }
});

Template:

<script type="text/x-handlebars">
   {{view App.TextFieldEmpty}}
</script>

JSBIN:

http://jsbin.com/uriroYO/6/edit?html,js,output

Upvotes: 3

caligoanimus
caligoanimus

Reputation: 1194

I would extend Ember.TextField (or whatever input type your validating) and use classBinding with a computed property. Here is the sample: http://jsfiddle.net/caligoanimus/7UNRd/

template:

<script type="text/x-handlebars" >
    {{view App.AlphaNumField
        placeholder="alpha-numeric data only"
        valueBinding="App.alphaNumInput"}}
</script>

application:

App = Ember.Application.create({
    AlphaNumField:  Ember.TextField.extend({
        isValid: function() {
            return /^[a-z0-9]+$/i.test(this.get('value'));
        }.property('value'),
        classNameBindings: 'isValid:valid:invalid'
    })
});

Upvotes: 14

Martin Stannard
Martin Stannard

Reputation: 811

https://github.com/dockyard/ember-validations might be useful. It also hooks up to Ember-easy-form

Upvotes: 17

yagooar
yagooar

Reputation: 15979

I would use a model / persistance layer which uses a conventional "errors" object to save validation errors on the model.

Since Ember shines when it comes to observing changes, I would observe the changing errors object to determine whether or not should there be shown a validation message.

In my current setup I'm using Tower.js as framework, because it uses Ember as the View layer, and has a strong model / persistance layer. This layer allows me to define validations on model level. Each time I try to persist a model, it is validated and an error is thrown. In my views, this error aborts the "ideal" path and does not keep executing the workflow, instead it renders the validation errors in the template.

Upvotes: 0

Related Questions