Javascript检查是否填写了所需的数据

Javascript check to see if required data is filled out

本文关键字：数据 检查 是否 Javascript      更新时间：2023-09-26

我有以下代码。这段代码工作棒极了，无论如何我唯一有问题的是，我不知道如何检查，看看是否填写所需的字段。

我已经尝试添加所需的字段选项，但它不起作用。我假设这是因为JavaScript代码没有检查，而不是"所需"的数据是填写之前允许它去下一页....?

我该如何添加对所需数据的检查，并可能禁用下一个按钮，直到填写所需的数据?

$(window).load(function() {
  $("#prev").on("click", function() {
    if ($(".page.active").index() > 0)
      $(".page.active").removeClass("active").prev().addClass("active");
  });
  $("#next").on("click", function() {
    if ($(".page.active").index() < $(".page").length - 1)
      $(".page.active").removeClass("active").next().addClass("active");
  });
});
.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  height: 700px;
  width: 500px;
  background: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-weight:bold">1.How long have you been working in field of Programming?</div>
<label for="textfield">Text Field:</label>
<input name="textfield1" type="text" required="required" id="textfield1">
</div>
<div class="page">
  <div style="font-weight:bold">2.Second Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield2" type="text" required="required" id="textfield2">
</div>
<div class="page">
  <div style="font-weight:bold">3.Another Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield3" type="text" required="required" id="textfield3">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

试试这个。只写required而不是required="required"

<form name="frm" >
  
  <div style="font-weight:bold">1.How long have you been working in field of Programming?</div>
<label for="textfield">Text Field:</label>
<input name="textfield1" type="text" id="textfield1" required>
</div>
<div class="page">
  <div style="font-weight:bold">2.Second Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield2" type="text" id="textfield2" required>
</div>
<div class="page">
  <div style="font-weight:bold">3.Another Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield3" type="text" id="textfield3" required>
</div>
<input type="submit" value="Submit">
  
  </form>

这是你的例子的WORKING FIDDLE 

 
   $(document).ready(function(){
    $("#prev").on("click", function() {
        if ($(".page.active").index() > 0)
          $(".page.active").removeClass("active").prev().addClass("active");
      });
      $("#next").on("click", function() {
        if ($(".page.active").index() < $(".page").length - 1)
          $(".page.active").removeClass("active").next().addClass("active");
      });
});
.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  height: 700px;
  width: 500px;
  background: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
<div style="font-weight:bold">1.How long have you been working in field of Programming?</div>
<label for="textfield">Text Field:</label>
<input name="textfield1" type="text" required="required" id="textfield1">
</div>
<div class="page">
  <div style="font-weight:bold">2.Second Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield2" type="text" required="required" id="textfield2">
</div>
<div class="page">
  <div style="font-weight:bold">3.Another Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield3" type="text" required="required" id="textfield3">
</div>
<button id="prev" type="submit">Prev</button>
<button id="next" type="submit">Next</button>
</form>

要获得html表单属性/元素的好处，您需要将其包装在<form>标签
这是一个演示链接，希望这是你正在寻找的demoink

你的html应该是

$(window).load(function() {
  $("#prev").on("click", function() {
    if ($(".page.active").index() > 0)
      $(".page.active").removeClass("active").prev().addClass("active");
  });
  $("#next").on("click", function() {
    if ($(".page.active").index() < $(".page").length - 1)
      $(".page.active").removeClass("active").next().addClass("active");
  });
});
.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  height: 700px;
  width: 500px;
  background: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-weight:bold">1.How long have you been working in field of Programming?</div>
<form action="" method="">
<label for="textfield">Text Field:</label>
<input name="textfield1" type="text" required="required" id="textfield1">
</div>
<div class="page">
  <div style="font-weight:bold">2.Second Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield2" type="text" required="required" id="textfield2">
</div>
<div class="page">
  <div style="font-weight:bold">3.Another Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield3" type="text" required="required" id="textfield3">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</form>

相关文章：