在按钮上需要验证单击不起作用Javsscript

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

    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>

我认为，如果您不希望进度栏继续进行，则需要为此'返回false'。这将停止执行[else]语句

上给出的内容

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

希望这对您有所帮助

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

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

将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

相关内容

最新更新

热门标签：