ember.js - data - Emberjs y Validación

ember on hover

Question

¿Cómo están manejando las personas la validación y la brasa del lado del cliente?

¿Hay algo listo para usar o un complemento que maneje la validación o las personas simplemente están haciendo lo propio?

Answer 1

Extendería Ember.TextField (o cualquier tipo de entrada que valide) y usar classBinding con una propiedad calculada. Aquí está la muestra: http://jsfiddle.net/caligoanimus/7UNRd/

modelo:

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

solicitud:

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''
    })
});

Answer 2

He tenido mucho éxito con 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.",
                },
            },
        });
    }
});

Simplemente usando el helper de entrada Ember, ha hecho que la validación de mi formulario sea muy clara. Puede tomar su script jQuery Validate y colocarlo en un archivo .js como una función y simplemente invocarlo en didInsertElement.

jQuery Validate agrega mensajes de error debajo de sus campos con el mensaje relacionado con la regla, y también le permite activar la validación de cualquiera de sus acciones o eventos a través del método .valid ().

Answer 3

Hemos creado nuestros propios campos de texto que generan errores de validación en el enfoque, y otros eventos y otros campos de texto los amplían:

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;
    }
});

Answer 4

Lo he estado manejando de una manera muy similar a @caligoanimus, pero validando el foco fuera del cuadro de texto y agregando un mensaje de error.

código:

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")
      }
   }
});

Modelo:

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

JSBIN:

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

Answer 5

Otra opción totalmente compatible y muy lógica si está utilizando bootstrap es usar el complemento de arranque-validación . En ember (ember-cli) esto debe instalarse usando bower:

bower install --save bootstrap-validation

luego en ember-cli-build debe importar dependencias:

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

Esta solución le permite validar a nivel html, dejando que bootstrap haga el trabajo "sucio". Para las validaciones estándar, esto hará el trabajo simple y sin esfuerzo.

Answer 6

Yo usaría una capa de modelo / persistencia que utiliza un objeto convencional de "errores" para guardar los errores de validación en el modelo.

Como Ember brilla cuando se trata de observar cambios, observaría el objeto de cambio de errores para determinar si se debe mostrar o no un mensaje de validación.

En mi configuración actual, estoy usando Tower.js como framework, porque usa Ember como la capa View, y tiene una capa de modelo / persistencia fuerte. Esta capa me permite definir validaciones en el nivel del modelo. Cada vez que intento persistir en un modelo, se valida y se produce un error. En mi opinión, este error aborta la ruta "ideal" y no sigue ejecutando el flujo de trabajo, sino que representa los errores de validación en la plantilla.

Answer 7

https://github.com/dockyard/ember-validations podría ser útil. También se conecta a Ember-easy-form