2015-02-11 148 views
0

我想用幾乎沒有成功的數據驗證器。我甚至沒有成功使它工作。我有一個關於所有必要javascript被調用的主頁面(包括foundation和foundation.abide),並且在這個頁面上,在用戶交互方面,我稱之爲用戶可以登錄或註冊的「滑動彈出窗口」。級聯遵守形式

在這種 「彈出」,在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}$/ 
     } 
    } 
}); 

有人可以幫助我嗎?

回答

0

基礎驗證申報將需要爲位於負載不在外面後:

$(".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 : { 
.... 
1

1)你有你的輸入重複的佔位符屬性

2)你必須尊重adibe HTML結構:每個<input>必須被包裹在一個<div>

3)如果你想顯示錯誤,你應該插入.error框在其中<input>位於同一區塊,否則adibe可以將誤差不得轉讓其相對場

這些是我發現:) 第一錯誤,但我覺得現在的問題是大約2點)

+0

問題並非來自這些點之一,但點的兩個幫助我的續集驗證,這就是爲什麼我投你的答案 – 2015-02-13 14:20:51

+0

謝謝:) 你發佈的代碼是這麼長,我did'nt檢查其他問題。 – pastorello 2015-02-13 14:52:50