Javascript检查是否需要填写数据

Question

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

我试图添加必填字段选项，但它不起作用。我假设这是因为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>

Answer 1

来获取HTML表单属性/元素中获益，你需要将其包装内<form>标签
这里是一个演示链接，希望这是你在找什么Demolink

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

Answer 2

试试这个。仅仅只写需要，而不是所需= “需要”

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

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>