Question

我有以下代码。这段代码很棒，但我唯一遇到的问题是我不知道如何查看是否填写了必填字段。

我尝试添加必填字段选项，但它不起作用。我假设这是因为JavaScript代码没有检查是否需要＆＃34;需要＆＃34;在允许数据进入下一页之前填写数据....？

如何添加对所需数据的检查以及可能禁用下一个按钮，直到填写所需数据？

＆＃13;

$(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");
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

要获得html表单属性/元素的好处，您需要将其包含在abc <- "Via- <U+0924><U+0930><U+094D><U+0915><U+0938><U+0902><U+0917><U+0924> - Tarksangat ~<U+0938><U+092F><U+094D><U+092F><U+0926> <U+092E><U+0902><U+095B><U+0930> <U+0907><U+092E><U+093E><U+092E>"标记内这是一个演示链接，希望这是您正在寻找的Demolink

你的HTML将是

<form>

$(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;
}

Answer 2

试试这个。只写必需而不是 required =＆＃34; required＆＃34;

＆＃13;

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

＆＃13;

Answer 3

以下是您的示例的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>

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

3 个答案: