フォームを作成し、次のステップにジャンプする前に検証したいのですが、これは私がやりたい重要な例です。この例では、電子メールが有効でない場合、ステップは機能しません
だから私はこれを私のフォームに入れようとしましたが、機能していません
これは翡翠のファイルです
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')
これは角度構成を含むjsです
// 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];
}
};
}
titulo_publicacion検証が機能しないのはなぜですか？tnx！
編集2
これは、タブが機能しないフォーム画像の結果です