我正在尝试使用遵守数据验证器，但收效甚微。我甚至没有成功地让它发挥作用。我有一个主页，上面调用了所有必要的javascript（包括foundation和foundation.beart），在这个页面上，在用户交互时，我调用了一个"向下滑动弹出窗口"，用户可以登录或注册。
在这个"弹出窗口"中，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 : rn';
for (var key in newArr) {
var obj = newArr[key];
alertString += obj+'rn';
}
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}$/
}
}
});
有人能帮我吗？
1）您的输入中有重复的占位符属性
2） 您必须尊重be-html结构：每个<input>都必须封装在<div> 中
3） 如果您想显示错误，您应该在<input>所在的同一块中插入.error框，否则adibe无法将错误分配给其相对字段
以下是我发现的第一个错误：）但我认为问题都是关于点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 : {
....