在条件内调用 JQuery 函数答案

【问题标题】：Calling a JQuery function inside a condition在条件内调用 JQuery 函数
【发布时间】：2015-03-30 01:16:40
【问题描述】：

我是 JS 和 JQuery 的新手，我正在尝试实现以下功能。

我有一个包含多个输入的表单，每个输入都有其单独的验证。这些验证已在一个函数中实现。

function checkUpload() {
    var flagu1=0;
    var bookname = document.getElementById("title").value;

    var flagu2=0;
    .....
    .....
    var flagu6=0;

    if( flagu1==0 && flagu2==0 && flagu3==0 && flagu4==0 && flagu6==0 )
        return true;
    else 
        return false;
}

当用户点击以下按钮时执行此验证功能：

<button class="btn btn-secondaryup" name="submit" value="Upload" id="submitmeup" data-loading-text="UPLOADING..." onclick="clearBox('uploaderror')" type="submit" style="width:100%">UPLOAD</button>

现在我正在尝试在此实现 Bootstap 的“加载状态按钮”。该功能将像这样工作：

当用户点击按钮时，会调用前端验证函数。一旦验证函数 (checkUpload()) 返回 true，则应调用以下 JQuery 函数。

<script>
       $('#submitmeup').click(function() {
       var $btn = $(this);
       $btn.button('loading');
       setTimeout(function () {
       $btn.button('reset');
       }, 5000);
       });
</script>

诀窍是按钮加载函数只能在 checkUpload 函数返回 true 后调用。我该如何实现？

【问题讨论】：

checkUpload 是同步方法吗？
@LShetty 是的。当用户点击提交按钮时调用该函数

标签： javascript jquery validation

【解决方案1】：

使用下面的代码。在条件中使用函数。如果函数返回true，则在条件中执行代码

 <script>
   $('#submitmeup').click(function() {
     var $btn = $(this);
     if(checkUpload()){
         $btn.button('loading');
         setTimeout(function () {
           $btn.button('reset');
         }, 5000);
       }
   });
</script>

【讨论】：

像魅力一样工作。非常感谢人！你能解释一下你刚刚在那里做了什么吗？这是如何检查 checkUpload 条件的？
您的函数根据您的验证返回真或假。所以如果它返回true，那么如果函数执行如果为false则没有代码执行
这段代码运行良好。但是由于某种原因，为什么验证错误语句被重复了。实现此代码后，我得到两个相同的语句来表示一个错误。知道为什么在实施此代码后会发生这种情况吗？
能否请您添加完整的功能代码？仅当您单击两次按钮之前它不会触发两次
刚刚发现上面的表单中已经调用了checkUpload函数。所以，现在这个函数被调用了两次。

【解决方案2】：

首先从按钮中移除onclick属性：

<button class="btn btn-secondaryup" name="submit" value="Upload" id="submitmeup" data-loading-text="UPLOADING..." type="submit" style="width:100%">UPLOAD</button>

然后定义你的函数并设置.on('click')事件处理器：

$(function() {

    var $submitButton = $('#submitmeup');

    // Submit handler
    function handleSubmit() {
        clearBox('uploaderror');

        var uploadValid = checkUpload();

        if (uploadValid) {
            // Upload successful
            showButtonLoading();
        }
    }

    function showButtonLoading() {
       $submitButton.button('loading');
       setTimeout(function () {
           $submitButton.button('reset');
       }, 5000);
    }

    function checkUpload() {
        var flagu1=0;
        var bookname = document.getElementById("title").value;

        var flagu2=0;
        .....
        .....
        var flagu6=0;

        if( flagu1==0 && flagu2==0 && flagu3==0 && flagu4==0 && flagu6==0 )
            return true;
        else 
            return false;
    }

    function clearBox(type) {
        // Your implementation here
    }

    // Event handler
    $submitButton.on('click', handleSubmit);

});

现在，单击按钮将转到使用您的代码的handleSubmit 函数。

【讨论】：