Question

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

    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>

Answer 1

我认为你需要回复虚假＆＃39;对于这个，如果你不想进度条继续。这将停止执行[else]语句中给出的内容

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

希望这会对你有所帮助

Answer 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>

Answer 3

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

中

请注意，i未定义。与progressbar元素和其他栏（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

Answer 4

<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>

按钮单击时无需验证JavsScript

4 个答案: