按钮单击需要验证 JavaScript 无效答案

【问题标题】：Validation Required on button click not working JavsScript按钮单击需要验证 JavaScript 无效
【发布时间】：2017-03-14 11:44:48
【问题描述】：

我正在尝试添加验证，因此当单击上传按钮时，如果文本框为空，则不要推进进度条并添加验证消息。但是，如果文本框中有一个值，则进度条。

    function makeProgress(){
         if ($('#textbox').val() == '') {
             alert("Please upload a file.");
         }
         else
        {
        $("#pbarmain").show();
        $("#pbar").show();
        if(i < 100){
            i = i + 4;
            $(".progress-bar").css("width", i + "%").text(i + " %");
            setTimeout("makeProgress()", 100);
            }
            }


            <input type="text" id = "textbox" class="form-control" readonly>

  <button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button>
    <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close</button>

【问题讨论】：

在函数的最后添加}，否则括号不匹配。
这是做什么的？
Angelos - 这似乎不起作用。它仍然在进度条上前进，并且没有出现任何警报。
请弹琴
我在哪里声明？进度条在哪里

标签： javascript jquery css html validation

【解决方案1】：

如果您不希望进度条继续，我认为您需要为此“返回 false”。这将停止执行 [else] 语句中给出的内容

if ($('#textbox').val() === '') {
    alert('Your alert message');
    return false; 
}

希望对你有帮助

【讨论】：

没问题。很高兴我们能提供帮助。请不要忘记在这里投票接受的答案。它对我们所有人都有帮助。
嗨，我该怎么做？我是新手
点击某个回复帖左侧的大/小箭头。参考：stackoverflow.com/help/privileges/vote-up。谢谢

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id = "textbox" class="form-control" readonly>
    <button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button>
    <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close</button>
</body>
</html>
<script type="text/javascript">

    function makeProgress(){
        if ($('#textbox').val() == '') {
            alert("Please upload a file.");
        }
        else
        {
            $("#pbarmain").show();
            $("#pbar").show();
            if(i < 100){
                i = i + 4;
                $(".progress-bar").css("width", i + "%").text(i + " %");
                setTimeout("makeProgress()", 100);
            }
        }
    }

</script>

【讨论】：

【解决方案3】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id = "textbox" class="form-control">
    <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close </button>
      <button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button>
      <div class="input-group col-xs-12"> <div class="input-group"> <label class="input-group-btn"> <span class="btn btn-primary"> <i class="glyphicon glyphicon-search"></i> Browse <input type="file" id = 'attachmentFileUploadInput' style="display: none;" multiple> </span> </label> <input type="text" id = "textbox" class="form-control"> </div> </div>
      <div class="modal-body"> <div id = "pbarmain" style="display: none" class="progress progress-striped active"> <div id = "pbar" class="progress-bar"></div> </div>
    <script>
    var i=0;
     var makeProgress= function (){
     console.log("in here");
             if ($('#textbox').val() == '') {
                 alert("Please upload a file.");
             }
             else
            {
            $("#pbarmain").show();
            $("#pbar").show();
            
            if(i < 100){
                i = i + 4;
                $(".progress-bar").css("width", i + "%").text(i + " %");
                setTimeout("makeProgress()", 100);
                }
                }
    }
    </script>

【讨论】：

【解决方案4】：

将 JavaScript 代码放入 <script></script>

请记住，i 未定义。与进度条元素和其他条（pbarmain 和 pbar）相同。

还要确保在您的代码中包含 Jquery。

<script type="text/javascript">
    function makeProgress() {
      if ($('#textbox').val() == '') {
        alert("Please upload a file.");
      } else {
        $("#pbarmain").show();
        $("#pbar").show();
        if (i < 100) {
          i = i + 4;
          $(".progress-bar").css("width", i + "%").text(i + " %");
          setTimeout("makeProgress()", 100);
        }
      }
    }
</script>

<input type="text" id="textbox" class="form-control">
<button type="button" onClick="makeProgress()" class="btn btn-default">Upload</button>
<button type="button" id="reset" class="btn btn-default" data-dismiss="modal">Close</button>

JSfiddle

【讨论】：