我正在编写一些功能来验证联系表格。一切正常,直到我得到第三个输入文本为止。
通常的想法是,每次用户单击“确定”按钮时,当前文本输入是否为空都将得到验证。如果没有,它将调用下一个函数。
我面临的问题是,由于某种原因,第三个函数仍在调用第一个函数,因此我得到了fadeIn和fadeOut的循环。我使用console.log
看到了这一点。我以为问题是因为我在所有功能中都使用了相同的按钮btnForm
,但我不知道。
在调用下一个函数后,我尝试使用return;
,但没有用。
这是我的代码:
//labels hidden by default, so parent().fadeIn works
$("#label0").parent().hide();
$("#label1").parent().hide();
$("#label2").parent().hide();
$("#label3").parent().hide();
$("#label4").parent().hide();
$("#label5").parent().hide();
$("#btn-label5").parent().hide();
$("#btn-form").parent().hide();
$(".custom-radio").click(function() {
// e.preventDefault();
var inputForm = $("input[name='expect-form']");
$("#aumentar-faturamento").click(function() {
inputForm.val("Aumentar nosso faturamento.");
console.log('faturamento');
validaNome();
});
$("#nao-sabemos").click(function() {
inputForm.val("Não sabemos o que esperar; sabemos apenas que precisa ser feito");
validaNome();
});
$("#comunicar-cliente").click(function() {
inputForm.val("Comunicar nosso cliente sobre algo específico");
validaNome();
});
$("#estreitar-cliente").click(function() {
inputForm.val("Estreitar nossa relação com o cliente");
validaNome();
});
$("#outro-dropdown").click(function() {
inputForm.val("Outro...");
validaNome();
});
})
function validaNome() {
var btnForm = $("#btn-form");
var inputName = $("input[name='name-form']");
$(".dropdown").fadeOut(function() {
$("#label1").parent().fadeIn();
$(btnForm).parent().fadeIn();
$(btnForm).click(function(e) {
e.preventDefault();
if(inputName.val() == ""){
console.log('Vazio')
inputName.addClass("error");
setTimeout(function() {
inputName.removeClass("error");
}, 3000);
}else{
console.log('inputName is not empty');
validaEmail();
}
})
});
}
function validaEmail() {
var btnForm = $("#btn-form");
var inputEmail = $("input[name='email-form']");
$("#label1").parent().fadeOut(function() {
$("#label2").parent().fadeIn();
$(btnForm).click(function(e) {
e.preventDefault();
if(inputEmail.val() == "") {
console.log('Email empty');
inputEmail.addClass("error");
setTimeout(function() {
inputEmail.removeClass("error");
}, 3000);
}else{
console.log('Email is not empty');
validaTel();
}
})
})
}
function validaTel() {
var btnForm = $("#btn-form");
var inputTel = $("input[name='tel-form']");
$("#label2").parent().fadeOut(function() {
$("#label3").parent().fadeIn();
$(btnForm).click(function(e) {
e.preventDefault();
if(inputTel.val() == ""){
console.log('Tel empty');
inputTel.addClass("error");
setTimeout(function() {
inputTel.removeClass("error");
}, 3000);
}else{
console.log('Tel is not empty');
}
})
})
}
我真的不知道我在做什么错。
@edit
validanome();之所以称为5x,是因为它是一个下拉菜单,在单击该下拉菜单中的任何选项后,他消失了,并且调用了该函数。