Javascript 如何在父函数中连接函数/侦听器
当代码启动review submit按钮的fadein/fadeout时,代码就处于当前状态,在第一次启动任何侦听器后,代码就会中断,并根据单个输入值进行切换,而不是考虑所有输入的状态Javascript 如何在父函数中连接函数/侦听器,javascript,css,function,validation,listener,Javascript,Css,Function,Validation,Listener,当代码启动review submit按钮的fadein/fadeout时,代码就处于当前状态,在第一次启动任何侦听器后,代码就会中断,并根据单个输入值进行切换,而不是考虑所有输入的状态 How would I go about combining these scripts under one function/listener so that they do not interfere with one another. The submit-button fadein/fadeout f
How would I go about combining these scripts under one function/listener so that they do not interfere with one another. The submit-button fadein/fadeout function should only fire if all inputs are valid or at least one input is invalid.
我也不确定从哪里开始找出如何将特定的验证效果应用于特定的InputsMail vs username vs password。我在下面写的每个脚本都是独立工作的,问题是当所有脚本都在同一页面上时,review submit按钮fadein/fadeout效果会中断
验证脚本1
I am unsure of how to create a universal function that validates each input without using things such as
$('#review-username')
验证脚本2
$('#review-username').on('input', function() {
$('#review-username').addClass('review-invalid');
if (!/^[A-Za-z0-9]*$/g.test(this.value)) {
this.focus();
return false;
this.setCustomValidity('Invalid Characters, Please Use Only AlphaNumeric Characters');
$('#review-username').removeClass('review-valid');
$('#review-username').addClass('review-invalid');
}
if(this.value.length >= 5) {
$('#review-submit-button').fadeIn(2250);
this.setCustomValidity('');
$('#review-username').addClass('review-valid');
$('#review-username').removeClass('review-invalid');
$('#review-submit-button').removeClass('preventclick');
}
if(this.value.length < 5) {
$('#review-submit-button').fadeOut(1250);
$('#review-username').removeClass('review-valid');
$('#review-username').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
if(this.value.length > 16) {
$('#review-submit-button').fadeOut(1250);
$('#review-username').removeClass('review-valid');
$('#review-username').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});
验证脚本3
$('#review-jobtitle').on('keyup', function(k) {
var val = $(this).val();
if (val.match(/[^a-zA-Z\s]/g)) {
$(this).val(val.replace(/[^a-zA-Z\s]/g, ''));
}
});
$('#review-jobtitle').on('input', function() {
$('#review-jobtitle').addClass('review-valid');
$('#review-jobtitle').addClass('invalid');
if (!/^[a-zA-Z\s]*$/g.test(this.value)) {
$('#review-jobtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
}else{
if(this.value.length >= 3) {
$('#review-submit-button').fadeIn(2250);
$('#review-jobtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
$('#review-submit-button').removeClass('preventclick');
}else{
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
}
}
if(this.value.length < 3) {
$('#review-submit-button').fadeOut(1250);
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}else{
$('#jreview-obtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
}
if(this.value.length > 32) {
$('#review-submit-button').fadeOut(1250);
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});
您可以创建一个附加函数来确定submit按钮的状态,并从各个处理程序调用它
$('#review-email').on('input', function() {
$('#review-email').addClass('review-invalid');
if(this.value.length >= 6) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(this.value.match(mailformat))
{
$('#review-submit-button').fadeIn(2250);
$('#review-email').removeClass('review-invalid');
$('#review-email').addClass('review-valid');
$('#review-submit-button').removeClass('preventclick');
}else{
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
}
if(this.value.length < 6) {
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('invalid');
$('#review-submit-button').addClass('preventclick');
}
if(this.value.length > 64) {
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});
总的来说,这是一个好方法。将常见的代码块重构为一个可重用的源代码。我不打算删除所有代码并确切地告诉您需要做什么,但这种方法应该可以满足您的需要。您能举个例子让我们帮助您吗。
function determineButtonState(){
var bothInputsAreValid = // logic for validation
if(bothInputsAreValid) // handle case for valid inputs
else // handle case for invalid inputs
}
$('#review-email').on('input', function() {
...
determineButtonState()
})