我有一个图像,它是一种微调器,在提交表单时显示给用户。
所以在js.coffe中,我做了这样的事情:
$('.button.save-btn.btn.btn-primary').click ->
$('.loader').show()
如果表单验证失败并显示错误,那么我会隐藏相同的图像,如下所示:
$('#error-box').show();
$('.loader').hide();
当遇到错误时,微调器可以正常工作,但现在如果用户在表单为空时单击提交按钮,该怎么办。我该如何处理该事件?在这种情况下,我将微调器图像到底隐藏在哪里?我希望我能正确解释我的问题,任何帮助都将不胜感激。提前Thanx:)
我个人不使用咖啡,但在普通js中,您可以在显示旋转图像之前检查字段是否有值:
$('.button.save-btn.btn.btn-primary').click(function(){
var form_compiled = false;
//iterate trough each input field
$("#MyformID").find("input, textarea").each(function(){
//check if input field has a value or is empty
if ($(this).val() != ""){
form_compiled = true;
}
})
// and then show the image if at least a filed is filled
if ( form_compiled == true){
$('.loader').show()
}
})
如果用户至少填写一个字段,上面的代码就可以工作。如果你只想对一些必填字段进行检查,你可以给它们添加类"required",例如,然后对这些类进行js检查:
$('.button.save-btn.btn.btn-primary').click(function(){
var form_compiled = true; << change initialization
$("#MyformID").find(".required").each(function(){
//check if input field is empty
if ($(this).val() == ""){
form_compiled = false; //set to false is a required field is empty
}
})
if ( form_compiled == true){
$('.loader').show()
}
})