我有一个jQuery代码,如果有任何空输入,应该以我的形式查看。如果所有输入都是空的,我的代码可以工作,但是当我输入一个值时,它不再起作用并且它会通过。请问你能帮帮我吗?谢谢!
jQuery(document).ready(function($) {
$('#next').click(function() {//My next button
$('#age, #weight, #target_weight, #size').each(function() {//All field from my form
if ($(this).val().trim().length == '') {//If all fields are empty -> do...
$("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250);
/*Here I want to show the error field on every empty element*/
$(this).closest('.questions').find('.error').css("visibility","visible");
$(this).css('border-color', "#ff0000");
} else {
alert("All fields are filled!");
//This will show the next hidden div and hide the last one
$('.active').removeClass('active').fadeIn().hide()
.next().show().addClass('active');
return false;
}
});
});
});
<div class="field personal-informations-icon">
<div class="questions-fcm-3 styled-radio">
<span class="title">age</span>
<div class="questions">
<input style="border-color: rgb(255, 0, 0);" id="age" class="personal-informations" pattern="[0-9]" name="age" placeholder="in Jahren" value="" min="1" aria-required="true" type="number">
<div style="visibility: visible;" class="error age_error">This field is required!</div>
</div>
</div>
<div class="questions-fcm-3 styled-radio">
<span class="title">weight</span>
<div class="questions">
<input style="border-color: rgb(255, 0, 0);" id="weight" class="personal-informations" pattern="[0-9]" name="weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
<div style="visibility: visible;" class="error weight_error">This field is required!</div>
</div>
</div>
<div class="questions-fcm-3 styled-radio">
<span class="title">target weight</span>
<div class="questions">
<input id="target_weight" class="personal-informations" pattern="[0-9]*" name="aim-weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
<div class="error target_weight_error">This field is required!</div>
</div>
</div>
<div class="questions-fcm-3 styled-radio">
<span class="title">Body Size</span>
<div class="questions">
<input id="size" class="personal-informations" pattern="[0-9]*" name="size" placeholder="in cm" value="" min="1" aria-required="true" type="number">
<div class="error size_error">This field is required!</div>
</div>
</div>
</div>
答案 0 :(得分:1)
您的代码中存在多个错误,但主要问题在于:
if ($(this).val().trim().length == '')
Length返回一个数字,并且您尝试将其与字符串进行比较。 我怀疑你的意思是:
if ($(this).val().trim() === '')
或者
if ($(this).val().trim().length === 0)
我从您的代码中移除了无关元素以获得MVCE
以下是您的MVCE的工作演示:JS Fiddle Demo
<强> JQuery的强>
$('#next').click(function() { //My next button
var isValid = true;
$('.personal-informations').each(function(i, obj) { //All field from my form
if ($(this).val().trim() === '') { //If this field is empty -> do...
/*Here I want to show the error field on every empty element*/
$(this).css("display", "block");
$(this).css('border-color', "#ff0000");
isValid = false;
console.log(isValid);
}
});
if (isValid) {
alert("All fields are filled!");
}
});
<强> HTML 强>
<div class="field personal-informations-icon">
<div class="questions-fcm-3 styled-radio">
<span class="title">age</span>
<div class="questions">
<input id="age" class="personal-informations" pattern="[0-9]" name="age" placeholder="in Jahren" value="" min="1" aria-required="true" type="number">
<div class="error age_error">This field is required!</div>
</div>
</div>
<div class="questions-fcm-3 styled-radio">
<span class="title">weight</span>
<div class="questions">
<input id="weight" class="personal-informations" pattern="[0-9]" name="weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
<div class="error weight_error">This field is required!</div>
</div>
</div>
<div class="questions-fcm-3 styled-radio">
<span class="title">target weight</span>
<div class="questions">
<input id="target_weight" class="personal-informations" pattern="[0-9]*" name="aim-weight" placeholder="in KG" value="" min="1" aria-required="true" type="number">
<div class="error target_weight_error">This field is required!</div>
</div>
</div>
<div class="questions-fcm-3 styled-radio">
<span class="title">Body Size</span>
<div class="questions">
<input id="size" class="personal-informations" pattern="[0-9]*" name="size" placeholder="in cm" value="" min="1" aria-required="true" type="number">
<div class="error size_error">This field is required!</div>
</div>
</div>
</div>
<input type="button" id="next" value="Next">
<强> CSS 强>
.error {
display: none;
}
有关您的代码的其他评论:
$(this)
。此外,您需要跟踪是否有空
领域。我使用名为isValid
的布尔值完成了这项工作。那
遇到空字段时,boolean设置为false,然后
您可以在显示警报之前检查布尔值。console.log()
是你的朋友。用它来调试你自己的代码。