Question

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

所以在js.coffe中我做了这样的事情：

$('.button.save-btn.btn.btn-primary').click ->
    $('.loader').show()

如果表单验证失败并显示错误，那时我会隐藏相同的图像，如下所示：

$('#error-box').show();
$('.loader').hide();

当遇到错误时，微调器工作正常但现在当用户在表单为空时单击提交按钮时会发生什么。我该如何处理这个事件？在这种情况下，我到底在哪里隐藏微调器图像？我希望我能正确解释我的问题，任何帮助将不胜感激。 Thanx提前:)）

Answer 1

我个人不使用咖啡，但在普通的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()
    }
})

Answer 2

如果用户填写了一个字段，则上面的代码可以正常工作。如果你想对一些必填字段进行检查，你可以添加类“必需”，例如，然后对这些类运行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()
    }

}）

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

2 个答案: