为什么这个验证不起作用？？？ 与玉angularjs jQuery和Twitter引导程序

Question

i make a form and i want to validate before jump to the next step this is an important example that i want to try to do. In this example if the email is not valid the step dont work

so i try to put this on my form but is not working

this is the jade file

link(rel='stylesheet',href='/stylesheets/index/publicacion/alquiler/departamento.css')
script(type='text/javascript',src='/javascripts/assets/angular.min.js')


#alquiler_departamento.row-fluid(ng-controller="RegisterCtrl")
    form(name='myForm',id="alquiler_departamento_formulario", onselectstart="return false", ondragstart="return false",action='/publicar',method='post',enctype="multipart/form-data")
        input(type='hidden',name='tipo-operacion',value='Alquiler' ,tipo-operacion)
        input(type='hidden',name='categoria',value='Departamento' ,categoria)


        ul.nav.nav-tabs
            li(ng-repeat='step in steps', ng-class='{active: $index==getCurrentStepIndex()}')
                a(href='javascript:void(0)', ng-click='goToStep($index)') {{step}}


        #seleccion(ng-switch on="selection")
            #paso_uno(ng-switch-when="Step 1: Team Info")
                #datos_titulo.span8
                    legend Titulo de la Publicacion
                    .control-group
                        .controls
                            input.input-block-level(type='text',placeholder="Ingrese un titulo para la publicacion",id='titulo_publicacion',name='titulo_publicacion',class='caja_texto')
                    .alert.alert-info
                        tt *- Coloque el titulo de la publicacion que aparecera en la cabecera de la misma.

                #datos_ubicacion.span8
                    input(type='hidden',id='latitud',name='lat')
                    input(type='hidden',id='longitud',name='lng')

                    legend Ubicacion
                    #datos_ubicacion_selects.span12
                        .control-group.play-blok
                            label.control-label(for='select_provincias') Provincia
                            .controls
                                select(id='select_provincias',name='cod_provincia')
                                    option(value='') -Seleccione Provincia-
                                    option(value="5") Cordoba
                        .control-group.play-blok
                            label.control-label(for='select_ciudades') Localidad
                            .controls
                                select(id='select_ciudades',name='cod_localidad')
                                    option(value='') -Seleccione Localidad-
                                    option(value='0') -Otra Localidad-
                        .control-group.play-blok
                            label.control-label(for='select_barrios') Barrio
                            .controls
                                select(id='select_barrios',name='cod_barrio')
                                    option(value='') -Seleccione Barrio-
                                    option(value='0') -Otro Barrio-
                    #datos_ubicacion_mapa.span12
                        include ../../../partials/gmaps/gmaps_publicacion   
                    #datos_ubicacion_direccion.span12
                        .control-group.play-blok
                            label.control-label(for='direccion') Calle
                            .controls
                                input(type='text',placeholder="Calle o Direccion exacta",class='direccion',id='direccion',name='calle')
                        .control-group.play-blok
                            label.control-label(for='numero') Altura
                            .controls
                                input(type='text',placeholder="Altura de Calle",class='numero',id='numero',name='numero')
                #datos_verticales.span4
                    legend Departamento
                    .control-group.play-blok
                        label.control-label(for='piso') Piso
                        .controls
                            input.input-small(type='text',name='piso',class='piso',id='piso',placeholder='1-99 o A-Z')
                    .control-group.play-blok
                        label.control-label(for='departamento') Departamento
                        .controls
                            input.input-small(type='text',name='departamento',class='departamento',id='departamento',placeholder='1-99 o A-Z')
                    .control-group.margen-ten
                        label.control-label(for='disponibilidad') Disponibilidad
                        .controls
                            select.input-medium(name='disponibilidad',id='disponibilidad')
                                option(value="Inmediata") Inmediata
                                option(value='') A partir de
                            input(id="fecha",name='fecha',type="date")


            #paso_dos(ng-switch-when="Step 2: Campaign Info")
                h2 hola paso dos


            #paso_tres(ng-switch-when="Step 3: Campaign Media")
                h2 hola paso tres


        .clearfix
        ul.pager.pull-left
            li(ng-class='{disabled: !hasPreviousStep()}')
                a(href='javascript:void(0);', ng-click='decrementStep()') ← Previous Step
            li(ng-class='{disabled: myForm.$invalid}')
                a(href='javascript:void(0);', ng-click='incrementStep(myForm)') Next Step →
        .pull-right
            button.btn.btn-success(style='margin: 20px 0;') Confirm and Register
        .clearfix


script(type='text/javascript',src='/javascripts/index/publicacion/alquiler/alquiler_departamento_angular_config.js')
script(type='text/javascript',src='javascripts/index/publicacion/alquiler/publicar_alquiler_select_funciones.js')

and this is the js including the angular configuration

// Declare app level module which depends on filters, and services
var app = angular.module('myApp', []);

app.directive('tituloPublicacion', function() {
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, elm, attrs, ctrl) {
                ctrl.$parsers.unshift(function(viewValue) {
                    if(viewValue && viewValue.match(/[a-z0-9\-_]+@[a-z0-9\-_]+\.[a-z0-9\-_]{2,}/)) {
                        // it is valid
                        ctrl.$setValidity('titulo_publicacion', true);
                        return viewValue;
                    } else {
                        // it is invalid, return undefined (no model update)
                        ctrl.$setValidity('titulo_publicacion', false);
                        return undefined;
                    }
                });
            }
        };
    });

function RegisterCtrl($scope, $location) {

  $scope.steps = [
    'Step 1: Team Info',
    'Step 2: Campaign Info',
    'Step 3: Campaign Media'
  ];
  $scope.selection = $scope.steps[0];

  $scope.getCurrentStepIndex = function(){
    // Get the index of the current step given selection
    return _.indexOf($scope.steps, $scope.selection);
  };

  // Go to a defined step index
  $scope.goToStep = function(index) {
    if ( !_.isUndefined($scope.steps[index]) )
    {
      $scope.selection = $scope.steps[index];
    }
  };

  $scope.hasNextStep = function(){
    var stepIndex = $scope.getCurrentStepIndex();
    var nextStep = stepIndex + 1;
    // Return true if there is a next step, false if not
    return !_.isUndefined($scope.steps[nextStep]);
  };

  $scope.hasPreviousStep = function(){
    var stepIndex = $scope.getCurrentStepIndex();
    var previousStep = stepIndex - 1;
    // Return true if there is a next step, false if not
    return !_.isUndefined($scope.steps[previousStep]);
  };

  $scope.incrementStep = function(form) {
    if (form.$invalid) return;

    if ( $scope.hasNextStep() )
    {
      var stepIndex = $scope.getCurrentStepIndex();
      var nextStep = stepIndex + 1;
      $scope.selection = $scope.steps[nextStep];
    }
  };

  $scope.decrementStep = function() {
    if ( $scope.hasPreviousStep() )
    {
      var stepIndex = $scope.getCurrentStepIndex();
      var previousStep = stepIndex - 1;
      $scope.selection = $scope.steps[previousStep];
    }
  };
}

why is not working the titulo_publicacion validate??? tnx!

EDIT 2

this is the result of the form image the tabs dont work

Answer 1

Register your directive as tituloPublicacion , not titulo_publicacion . In your html/jade, use titulo-publicacion .

You need to add it to your input field too:

input(type='hidden',name='tipo_operacion',value='Alquiler', tipo-operacion)

In your directive use restrict: 'A' .

I didn't see it in your snippet, but you need to let angular bootstrap itself:

html(ng-app='myApp')

You are not injecting services correctly . Try to use the non-minified angular version for now.

You have to create controllers like:

app.controller('RegisterCtrl', ['$scope', 'location', function($scope, $location) {
  $scope.steps = [
   'Step 1: Team Info',
   'Step 2: Campaign Info',
   'Step 3: Campaign Media'
  ];
  ...
}]);