Question

我有一个有多个div的网页。我一次显示每个div，并通过提供下一个和上一个遍历按钮显示。每当我点击下一步，我希望该div中的元素得到验证。我在每个输入中包含了无效函数;但我不知道如何将它们映射到下一个和上一个按钮。

<form method="post">
<div id="divs">
<div id="div1">
<fieldset>
<legend>User Details</legend>
<p><label for="id">ID</label>
<input type="text" name="usermail" pattern="[0-9]{9}" placeholder="Enter your ID" required id="id" oninvalid="this.setCustomValidity('Please enter your 9 digit id')" oninput="setCustomValidity('')"></p>           
<p><label for="email">Email</label>
<input type="email" name="email" placeholder="yourname@email.com" required id="email" oninvalid="this.setCustomValidity('Please enter your email id')" oninput="setCustomValidity('')"></p>
</fieldset>     
</div>

<div id="div2">    
<fieldset>
<legend>Add Rooms</legend>
<p><label>Select Room</label>   
<input type="text" name="Room No." pattern="[0-9]{3}" placeholder="Enter Room No." required id="roomid" oninvalid="this.setCustomValidity('Please enter the Room No.')" oninput="setCustomValidity('')"></p> 
</p>  
</fieldset>
</div>

<div id="div3"> 
<fieldset>
<legend>Add Building No.</legend>
<p><label>Select Building</label>  
<input type="text" name="Building No." pattern="[0-9]{2}" placeholder="Enter building no." required id="buildingid" oninvalid="this.setCustomValidity('Please enter the Building No.')" oninput="setCustomValidity('')"></p> 
</div>
</div>
<input type="submit" value="Next" id="next">
<input type="submit" value="Previous" id="prev" style="display: none;">
<input type="submit" value="Submit" id="submit" style="display: none;">
</form>

在下一个和上一个按钮之间遍历的脚本如下：

<script type="text/javascript">
$(document).ready(function(){
//$("#prev").hide();
$("#divs div").each(function(e) {
    if (e != 0) {
        $(this).hide();
    }            
}); 

$("#next").click(function(){
    $("#divs div:visible").hide().next().show();
    if ($("#divs div:visible").next().length == 0) {
        $("#next").hide();
        $("#submit").show();
    }

    $("#prev").show();

});

$("#prev").click(function(){
    $("#divs div:visible").hide().prev().show();
    if ($("#divs div:visible").prev().length == 0) {
        $("#prev").hide();
    }

    $("#next").show();
    $("#submit").hide();
});
});

</script>

如果有人能帮助我，我将不胜感激。谢谢！

验证一个div并允许移动到另一个div

0 个答案: