javascript - 尝试检查文本框是否为空并提醒用户

标签 javascript jquery

我正在尝试使用 Javascript 检查文本框是否为空,并警告哪个文本框为空/无效。由于我使用的是Notepad++,所以我似乎找不到问题。

$(document).ready(function(){
            $("#sButton").click(function(){
                if( $('#demo').html().length == 0){
                    alert("Name part is empty!");
                }
                if( $('#demo2').html().length == 0){
                    alert("Surname part is empty!");
                }
            }
        }
<body>

  <p>Name:</p><div id="demo"> <input type="text" name="fname"></div>
  <br><br>
  <p>Surname:</p><div id="demo2"><input type="text" name="lname"></div>
  <br><br>

  <div><input type="submit" value="Submit" id="sButton"></div>

最佳答案

sButton 是一个 class 而不是 id 所以使用类选择器,希望这有帮助

$(document).ready(function(){
            $(".sButton").click(function(){
                if(! $(".name").val().trim()){
                    alert("Name part is empty!");
                }
                else if( !  $(".lname").val().trim()){
                    alert("Surname part is empty!");
                }
                else
                alert("Form Submitted")
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Name:</p><div id="demo"> <input class="name" type="text" name="fname"></div>
  <br><br>
  <p>Surname:</p><div id="demo2"><input class="lname" type="text" name="lname"></div>
  <br><br>

  <div><input type="submit" value="Submit" class="sButton"></div>

关于javascript - 尝试检查文本框是否为空并提醒用户,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55918729/

相关文章:

javascript - 在 ng-repeat 元素上添加事件

jquery - 颜色选择器不添加到动态 HTML 表

jquery - 打开/关闭时图像变化

php - 数据表警告 : Non-table node initialisation (TBODY). PHP

javascript - 如何在canvas html5中使用图像填充样式

javascript - 如何在 Google Chrome javascript 调试器中单步执行代码

javascript - 向网站添加了一些代码,它工作正常但似乎无​​限滚动到页脚之外

jquery - 使 HTML 表单元素对齐

javascript - 访问 jQuery 返回值

javascript - 为什么我不能在我的对象脚本中传递这个 jquery 选择器?