Question

我正在尝试使用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>

Answer 1

public class ContentTypeInterceptor implements ClientHttpRequestInterceptor { @Override public ClientHttpResponse intercept(HttpRequest request, byte[] body, ClientHttpRequestExecution execution) throws IOException { ClientHttpResponse http = execution.execute(request, body); HttpHeaders headers = http.getHeaders(); if (headers.getContentType() == MediaType.APPLICATION_OCTET_STREAM) { headers.setContentType(MediaType.APPLICATION_XML); } return http; } }是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")
            });
        });

Answer 2

将课程更改为 id

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

Answer 3

请将id demo和demo2都添加到两个输入中，并使用以下代码检查文本区域是否为空

$(document).ready(function(){
            $(".sButton").click(function(){
                if( $('#demo').val() == ""){
                    alert("Name part is empty!");
                } else if( $('#demo2').val() == ""){
                    alert("Surname part is empty!");
                } else {
                    alert("All fields are filled");
                }

            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Name:</p><div > <input id="demo" type="text" name="fname"></div>
<br><br>
<p>Surname:</p><div ><input id="demo2" type="text" name="lname"></div>
<br><br>
<div><input type="submit" value="Submit" class="sButton"></div>

Answer 4

您也可以做类似的事情

我给了输入一个input类，并使用each遍历了该类的所有元素。

使用此方法，您可以检查给定类的任何输入是否为空。

如果是，则将类.error添加到红色的空白边框上。

我通过为警报部分提供placeholder属性来解决警报部分，如果该属性为空，则以下代码：alert($(this).attr("placeholder")+" is empty!");将警报其占位符+“为空”。

我建议使用此解决方案，因为只要您为它们提供input类，它也可以使用10,20个或更多输入。但是我不建议使用警报来实现。

在此代码中，您将知道哪个是空的，因为它将带有红色边框。

$(document).ready(function(){
            $(".sButton").click(function(){
             $(".input").each(function(){
          if($(this).val()==""){
          $(this).addClass("error");
          alert($(this).attr("placeholder")+" is empty!");
    }
    else{
    $(this).removeClass("error");
    }
  });
               
            });
           
        });

.error{
border:2px solid red;
}

<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 input" type="text" name="fname" placeholder="Name"></div>
  <br><br>
  <p>Surname:</p><div id="demo2"><input class="lname input" type="text" name="lname" placeholder="Surname"></div>
  <br><br>

  <div><input type="submit" value="Submit" class="sButton"></div>

尝试检查文本框是否为空并警告用户

4 个答案: