如何在提交空白表单时隐藏图像

How to hide an image on blank form submission?

本文关键字：隐藏 图像 表单 空白 提交      更新时间：2023-12-14

我有一个图像，它是一种微调器，在提交表单时显示给用户。

所以在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()
    }

})

相关文章：