级联形式

Question

我正在尝试使用遵守数据验证器，但收效甚微。我什至没有成功让它工作。我有一个主页，上面调用了所有必要的 javascript（包括基础和 foundation.abide），在这个页面上，在用户交互中，我调用了 "slidedown popup" 让用户能够登录或注册。

在 "popup" 中，html 看起来像这样：

<form id="login" data-abide>
     <div class="large-10 large-centered small-11 small-centered columns">
          <input placeholder="email" id="email" name="email" class="email" placeholder="large-10.columns" type="email" required />
          <input type="password" placeholder="Mot de passe" id="mdp" name="mdp" placeholder="large-10.columns" required />
          <div id="erreur"></div>
          <!--<a href="#" class="mdp-oubli"><small>Mot de passe oublié?<small></a>-->
          <button TYPE="submit" class="bt-login">Je me connecte</button>
     </div>
</form>

我的 javascript 看起来像这样:

var utilisateur = {};

jQuery(document).ready(function($) {

   $('.img_page').before($('h1'));
   $("#bt2").click(function() {
       $("#Modal2").reveal();
   });

   $("#bt8").click(function() {
       $("#Modal3").reveal();
   });

   $(".voir-nav").click(function(){

       if($(".nav-bar").css("display") == "none"){
           $(".nav-bar").css("display", "block");
       } else if($(".nav-bar").css("display") == "block"){
           $(".nav-bar").css("display", "none");
       }
   });
   $(document).foundation({
       abide : {
           validators: {
               freeemail: function(el, required, parent){
                   email = el.val;
                   if (email == ''){
                       return 0;
                   } else {
                       var posting = $.post('check-email.html', email);
                       posting.done(function (data){
                           return data;
                       });
                   }
               }
           },
           patterns: {
               age: /^[1-9]{2}$/
           }
       }
   });
   $(".appel-rdv").click(function() {
       $('#afficheFormRdv').load('form-login.html', function(response, status, xhr){
           if (status=='success'){
               if (response ==2) {
                     document.location.href = 'utilisateur.html';
               } else {
                               $(document).foundation('abide', 'reflow');
                   $(".prise-rdv").slideDown();
                   $("#login")
                   .on('invalid.fndtn.abide', function () {
                       var invalid_fields = $(this).find('[data-invalid]');
                       console.log(invalid_fields);
                   })
                   .on('valid.fndtn.abide', function () {
                       utilisateur['email'] = $('#email').val();
                       utilisateur['mdp'] = $('#mdp').val();
                       var posting = $.post('login.html', utilisateur);
                       posting.done(function (data){
                           if (data==1){
                               $(".prise-rdv").slideUp();
                               document.location.href = 'utilisateur.html';
                           } else {
                               $('#erreur').html(data);
                           }
                       });
                   });

                   $("#inscription").on('invalid.fndtn.abide', function () {
                       var invalid_fields = $(this).find('[data-invalid]');
                       console.log(invalid_fields);
                   })
                   .on('valid.fndtn.abide', function () {
                       utilisateur['email'] = $('#email1').val();
                       utilisateur['mdp'] = $('#mdp1').val();
                       $('#afficheFormRdv').load('validation.html', function(response, status, xhr){
                           if (status == 'success'){
                               $(document).foundation('abide', 'reflow');
                               /*
                                * permet de choisir la ville en fonction du code postal
                                */
                               $('#cp').change(function(){
                                   if ($(this).val().length==5){
                                       var posting = $.post( 'getvilles.html', {cp: $(this).val()} );
                                       posting.done(function( data ) {
                                           var $el = $("#ville");
                                           $el.empty(); 
                                           var truc = eval(data);
                                           $.each(truc, function(i, value) {
                                               $el.append($('<option>').text(value).attr('value', value));
                                           });
                                           $el.trigger('change');
                                       });
                                   }
                               });
                               $('#validation-insc').on('invalid.fndtn.abide', function () {
                                   var invalid_fields = $(this).find('[data-invalid]');
                                   console.log(invalid_fields);
                               })
                               .on('valid.fndtn.abide', function () {
                                       $(form).find(":input").each(function(){
                                           utilisateur[this.name] = $(this).val();
                                       });
                                       var posting = $.post( 'inscription.html', utilisateur );
                                       posting.done(function( data ) {
                                           if (data==1){
                                               $(".prise-rdv").slideUp();
                                               document.location.href = 'utilisateur.html';
                                           } else {
                                               var newArr = JSON.parse(data);
                                               var alertString = 'Des erreurs sont survenues : \r\n';
                                               for (var key in newArr) {
                                                   var obj = newArr[key];
                                                   alertString += obj+'\r\n';
                                               }
                                               alert(alertString);
                                           }
                                       });
                                  }
                               );
                           }
                       });
                   });
               }
           } else if (status=='error') {
               alert('Une erreur est survenue, merci de réessayer plus tard');
           }
       })
     return false; 
   });


   $(".rdv-fermer").click(function() {
       $(".prise-rdv").slideUp();
       return false; 
   });

/* ********************************************************************************************************************* */
/* ************************************************** Slider ********************************************************** */
   var slider = new MasterSlider();
       slider.setup('masterslider' , {
           width:1900,
           height:710,
           heightLimit:710,
           space:0,
           view:"basic",
           layout:'autofill',
           speed           : 20,
           autoplay        : true,
           endPause        : false,
           overPause       : true,
       });
       slider.control('arrows' ,{autohide:false, insertTo:'#masterslider'});   
     slider.control('timebar',{autohide:false, overVideo:true, align:'bottom', color:'#8b8b8b'  , width:4 });

slider.control('bullets' , {autohide:false  , dir:"h", align:"bottom", overVideo:false });

/* ------------------------------------------------------ FIN slider -------------------------------------------------- */


/* ********************************************************************************************************************* */
/* ************************************************** Landing ********************************************************** */


$("#presentation").imagesLoaded( function() {

   $("#presentation li").each(function(){
       var hauteurContenu = $(this).find('.content').outerHeight();
       var hauteurConteneur = $(this).height();
       var marginContenu = ((hauteurConteneur - hauteurContenu) / 2);
       $(this).find('.cube').css('paddingTop', marginContenu);
   });

   var largeurPrix = $('#formRdv #prix').outerWidth();
   var largeurFormRdv = $('#formRdv').width();
   var marginPrix = ((largeurFormRdv - largeurPrix) / 2);
   $('#formRdv #prix').css('marginLeft', marginPrix);

   $(window).on('resize', function(){
         $("#presentation li").each(function(){
           var hauteurContenu = $(this).find('.content').outerHeight();
           var hauteurConteneur = $(this).height();
           var marginContenu = ((hauteurConteneur - hauteurContenu) / 2);
           $(this).find('.cube').css('paddingTop', marginContenu);
       });
   });

});

$(".ouvrir .open").hide();

$(".ouvrir").click(function() {
   if( $(this).find('.open').is(":hidden")) {
     $(this).find('.open').fadeIn('300');
   };
});

$(".ouvrir .bouton, .ouvrir .bt").click(function() {
   if( $(".ouvrir").find('.open').not(":hidden")) {
     $(".ouvrir").find('.open').fadeOut('300');
   };
});
var tailleOpenHeure = $('#heure .open ul li').height() * ($('#heure .open ul li').length / 4) - 16;
$('#heure .open ul').height(tailleOpenHeure);

/* ------------------------------------------------------ FIN Landing -------------------------------------------------- */


/* ********************************************************************************************************************* */
/* ************************************************** Menu transparent ************************************************* */

var posNavprincipale =  $("#nav-principale").css("top");
var btMenu = $(".nav_transparent .bt-menu");

$(".nav_transparent .bt-menu").click(function(event) {
   if (posNavprincipale == '-80px') { 
      $(".nav_transparent").stop().animate({top: '-80'}, 300);
       $(".nav_transparent").stop().fadeOut(800);
       $("#nav-principale").stop().animate({top: '0'}, 300); 
   };    
});

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();

  if (scroll < 350 && posNavprincipale == '-80px') {
   $(".nav_transparent").stop().fadeIn(1000);
   $("#nav-principale").stop().animate({top: '-80'}, 300);
   }else{
       $(".nav_transparent").stop().fadeOut(800);
       $("#nav-principale").stop().animate({top: '0'}, 300);
   };
});


/* ------------------------------------------------- FIN Menu transparent ----------------------------------------------- */

/* ********************************************************************************************************************* */
/* ************************************************** ui utilisateur  ************************************************* */
var largeurAffichedate = $('.rdv_complement').width();
var hauteurAffichedate = $('.rdv_complement').height() + 36;

$("#affichedate").width(largeurAffichedate);
$("#affichedate").height(hauteurAffichedate);

var middleP = ((hauteurAffichedate - $("#affichedate p").height()) / 2) - 20;
$("#affichedate p").css('marginTop', middleP);

 $(window).on('resize', function(){
       var largeurAffichedate = $('.rdv_complement').width();
       var hauteurAffichedate = $('.rdv_complement').height() + 36;

       $("#affichedate").width(largeurAffichedate);
       $("#affichedate").height(hauteurAffichedate);
   })

/* ------------------------------------------------------ FIN ui utilisateur -------------------------------------------------- */

$('.fdatepicker').fdatepicker()

});

我还有另一个文件调用了特定于法语的验证器：

$(document).foundation({
    abide : {
        patterns: {
            nom: /^[a-zéèàêâôùïüë](?:[- ']?[a-zéèàêâôùïüë]){2,59}$/i,
            adresse: /^[a-zéèàêâôùïüë\- ']{2,100}$/i,
            codepostal: /^[0-9]{5}$/,
            telephone: /^0[1-9][0-9]{8}$/
        }
    }
});

有人可以帮助我吗？

Answer 1

1) 您的输入中有重复的占位符属性

2) 你必须尊重 adibe html 结构：每个 <input> 必须包裹在 <div>

3）如果要显示错误，应该在<input>所在的同一块中插入.error框，否则adibe无法将错误分配给其相对字段

这些是我发现的第一个错误:) 但我认为问题在于第 2 点）

Answer 2

基础验证器声明需要位于负载之后而不是外部：

$(".appel-rdv").click(function() {
    $('#afficheFormRdv').load('form-login.html', function(response, status, xhr){
        if (status=='success'){
            if (response ==2) {
                  document.location.href = 'utilisateur.html';
            } else {
                $(document).foundation({
                    abide : {
....

级联形式

Cascade abide forms

javascript

validation

zurb-foundation

zurb-foundation-5