Javascript 当输入字段为空时，如何防止面板转到下一个面板
我有一个基于包含表单的面板的问题。如何防止在包含空表单字段的起始面板上单击“下一步”？如果表格填写在第一个面板中，则“下一步”按钮将允许用户转到下一个面板。在我提供的代码中，当输入字段为空时，用户可以从面板1转到面板2。但是，在面板2中，用户在填写表单之前无法继续操作，这就是显示验证消息的原因。我一直在努力解决这个问题，做了大量的研究，但没有找到解决办法。任何人都可以根据我目前使用的代码帮助我。非常感谢您抽出时间。还有一些原因，当在空输入上单击submit时，选项卡会将焦点放在最后一个输入上，而不是第一个输入 我试过的 btnNext类允许我转到下一个面板。因此，当输入字段为空时，btnNext类将被删除。填充字段后，将添加类，允许用户移动到下一张幻灯片。这在面板2上起作用。但当启动面板1时，btnNext出现，允许我在字段为空时转到第二张幻灯片 改进如果我对这个问题的回答是否定的，请告诉我原因，以便我全面改进我的问题。谢谢 //JavaScript文档 $document.readyfunction{ /*选择“下一个”和“上一个”时转到“下一个”和“上一个”面板*/ $'.btnPrev'.css'display'，'none'；//启动面板时隐藏prev按钮 $document.readyfunction{ 变量$fieldset= $'面板.集' 第一 .addClass“活动” 终止 .不是“：首先” 隐藏 终止 var$panelControlButtons= $“面板控制按钮” .filter'.btnPrev' .prop'disabled'，true 终止 $'panelcontrol' .在“单击”、“按钮”功能上{ e、 防止违约； 切换为真{ 案例$this.hasClass'btnNext'： var$newFieldset= $fieldset .filter'.active' 隐藏 .removeClass“活动” 下一个 .addClass“活动” 显示 /*--------------验证-------------*/ $'.btnNext'。单击函数E{ var focusSet=false； //JavaScript文档 函数validateEnumberNumber{ /*var numberPattern=/[^A-Za-z]/*/ var regex=/^\$？[1-9][0-9]{0,2}，[0-9]{3}*.[0-9]{1,2}？$/； var numStr=123.20； 返回regex.testnumber； 返回numStr.testnumber； } //1-其他金额 如果$first\u panel\u monthly'.hasClass'active'{//仅当在第三个面板上时 如果！$“输入其他金额”。val{ 如果$'input\u otherAmount'.parent.next'.Inval'.length==0{ $input_otherAmount.parent.after请选择或输入礼品金额； } $'input\u otherAmount'。焦点； 焦点集=真； }否则{ $input_otherAmount.parent.next.Inval.remove； } 如果！ValidateEnumber$'input\u otherAmount'.val{ 如果$'input\u otherAmount'.parent.next'.Inval'.length==0{ $input_otherAmount.parent.after请选择或输入礼品金额； } $'input\u otherAmount'。焦点； 焦点集=真； } }否则{ //嗯 $input_otherAmount.parent.next.Inval.remove； } //2-名字 如果$'second\u panel\u monthly'.hasClass'active'{//仅当在second上时 如果！$'firstName'.val{ //如果无效 如果$'firstName'.parent.next'.Inval'.length==0{ $firstName.parent.AFTER请输入名字； } $'firstName'。焦点； 焦点集=真； }否则{ //嗯 $firstName.parent.next.Inval.remove； } }否则{ $firstName.parent.next.Inval.remove； } //基于值隐藏和显示下一个按钮类 中频聚焦{ $continue\u btn.removeclassbtnext；//删除continue按钮的类。禁用continue }否则{ $continue\u btn.addClass'btnNext'；//为“继续”按钮添加类。启用“继续” } //3-姓氏 如果$'second\u panel\u monthly'.hasClass'active'{ 如果！$'lastName'.val{ 如果$'lastName'.parent.next'.Inval'.length==0{ $lastName.parent.after请输入姓氏； } $'lastName'。焦点； 焦点集=真； }否则{ //嗯 $lastName.parent.next.Inval.remove； } //验证电子邮件-电子邮件格式 }否则{ //嗯 $lastName.parent.next.Inval.remove； } //基于值隐藏和显示下一个按钮类 中频聚焦{ $continue\u btn.removeclassbtnext；//删除continue按钮的类。禁用continue }否则{ $continue\u btn.addClass'btnNext'；//为“继续”按钮添加类。启用“继续” } }; /*---------------验证结束--------------*/ //启用上一个按钮 $panelControlButtons .filter'.btnPrev' .prop'disabled'，false； $'.btnPrev'.css'display'，'block'； //禁用下一步按钮 如果$newFieldset.is'：最后一个孩子{ $panelControlButtons .filter'.btnNext' /*.prop'disabled'，true*/ $'：last child.find.btnNext.textPlace Payment；//一旦最后一个子元素出现，btn将更改文本 } 中断；//btnNext 案例$this.hassclass'btnPrev'： var$newFieldset= $fieldset .filter'.active'//选择当前字段集 .隐藏//隐藏它 .removeClass'active'//删除活动标志 .prev//移动到上一个字段集 .addClass'active'//标记为active .表演//并展示它 //启用下一步按钮 $panelControlButtons .filter'.btnNext' .prop'disabled'，false； $'：最后一个子项.find.btnNext.textContinue//选择“上一个”时，将显示下一个添加的文本 //禁用上一个按钮 如果$newFieldset.is'：第一个孩子{ $panelControlButtons .filter'.btnPrev'.css'display'，'none'//返回第一组面板时隐藏prev按钮 .prop'disabled'，true； } 中断；//上一页 } }; // 面板控制按钮处理程序 }; }; //文件结束准备好了吗 其他金额 联系方式 名字 姓 电话号码 以前的 持续Javascript 当输入字段为空时，如何防止面板转到下一个面板,javascript,jquery,forms,validation,panels,Javascript,Jquery,Forms,Validation,Panels,我有一个基于包含表单的面板的问题。如何防止在包含空表单字段的起始面板上单击“下一步”？如果表格填写在第一个面板中，则“下一步”按钮将允许用户转到下一个面板。在我提供的代码中，当输入字段为空时，用户可以从面板1转到面板2。但是，在面板2中，用户在填写表单之前无法继续操作，这就是显示验证消息的原因。我一直在努力解决这个问题，做了大量的研究，但没有找到解决办法。任何人都可以根据我目前使用的代码帮助我。非常感谢您抽出时间。还有一些原因，当在空输入上单击submit时，选项卡会将焦点放在最后一个输入上，而
我删除了代码中的嵌套document.ready函数。我使用了你的一些代码，但不是全部。希望这有帮助
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Panel 2 (monthly) starts here -->
<form id="myForm">
<fieldset>
<div id="panels">
<!--Sets-->
<div class="sets" id="first_panel_monthly">
<table>
<tr>
<td>
<div class="form-group">
<label for="total" class="control-label">Other Amount</label>
<input type="text" name="total" id="input_otherAmount" class="input-control" />
</div>
</td>
</tr>
</table>
</div>
<!--End of sets-->
<!--Sets-->
<div class="sets" id="second_panel_monthly">
<h3>Contact Information</h3>
<div>
<label for="firstName">First Name</label>
<input name="firstName" type="text" class="form-control" id="firstName" />
</div>
<div>
<label for="lastName">Last Name</label>
<input name="lastName" type="text" class="form-control" id="lastName" />
</div>
<div>
<label class="label-effect" for="phonePanelTwo">Phone Number</label>
<input name="phonePanelTwo" type="tel" class="form-control" id="phonePanelTwo" />
</div>
</div>
<!--End of sets-->
<!--Sets-->
<div class="sets" id="third_panel_monthly">
<h3>Contact Information</h3>
<div>
<label for="firstName">First Name</label>
<input name="firstName2" type="text" class="form-control" id="firstName2" />
</div>
<div>
<label for="lastName">Last Name</label>
<input name="lastName2" type="text" class="form-control" id="lastName2" />
</div>
<div>
<label class="label-effect" for="phonePanelTwo">Phone Number</label>
<input name="phonePanelThree" type="tel" class="form-control" id="phonePanelThree" />
</div>
</div>
<!--End of sets-->
</div>
</fieldset>
</form>
<!----End of panel---->
<div class="row">
<div id="panelcontrol">
<button class="btnPrev btn_panel_style">Previous</button>
<div class="btn_grid_wrapper">
<button id="continue_btn" class="btnNext btn_panel_style">Continue</button>
</div>
</div>
</div>
<!--cust: -->
<!-- <script src="js/form-validate-one.js"></script>-->
<script>
// JavaScript Document
$(document).ready(function() {
/*goes to next and prev panels when selecting next and previous*/
$('.btnPrev').css('display', 'none'); //hides the prev button when starting the panel
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
var $panelControlButtons =
$('#panelcontrol button')
.filter('.btnPrev')
.prop('disabled', true)
.end();
var focusSet = false;
function validateNumber(number) {
/* var numberPattern = /[^A-Za-z]/;*/
var regex = /^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/;
var numStr = "123.20";
return regex.test(number);
return numStr.test(number);
}
function showNextDiv() {
var nextDiv = $(".sets:visible").next(".sets");
var first = 0;
if (nextDiv.length == 0) {
// nextDiv = $(".sets:first"); // wrap around to beginning
// submit the form
$("#myForm").submit();
first = 1;
}
else {
first = 0;
}
$(".sets").hide();
$(".sets").removeClass('active');
nextDiv.show();
nextDiv.addClass('active');
if(first != 1) {
$(".btnPrev").show();
$(".btnPrev").prop('disabled', false);
}
else {
$(".btnPrev").hide();
$(".btnPrev").prop('disabled', true);
}
}
$(".btnPrev").click(function() {
console.log("previous");
var prevDiv = $(".sets:visible").prev(".sets");
console.log(prevDiv);
if (prevDiv.length == 0) { // wrap around to end
prevDiv = $(".sets:last");
}
$(".sets").hide();
$(".sets").removeClass('active');
prevDiv.show();
prevDiv.addClass('active');
if (prevDiv.is('.sets:first')) {
console.log("first");
$(".btnPrev").hide();
$(".btnPrev").prop('disabled', true);
}
else {
$(".btnPrev").show();
$(".btnPrev").prop('disabled', false);
}
});
$('#panelcontrol')
.on('click', '.btnNext', function(e) {
//e.preventDefault();
//1 - OTHER AMOUNT
if ($('#first_panel_monthly').hasClass('active')) { //ONLY IF ON FIRST PANEL
if (!$('#input_otherAmount').val()) {
if ($('#input_otherAmount').parent().next('.Inval').length == 0) {
$("#input_otherAmount").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please select or enter a gift amount</div>");
}
$('#input_otherAmount').focus();
focusSet = true;
}
else
if (!validateNumber($('#input_otherAmount').val())) {
if ($('#input_otherAmount').parent().next('.Inval').length == 0) {
$("#input_otherAmount").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please select or enter a gift amount</div>");
}
$('#input_otherAmount').focus();
focusSet = true;
}
else {
$("#input_otherAmount").parent().next(".Inval").remove();
//$("#continue_btn").prop('disabled', true);
focusSet = false;
console.log("first panel ok");
showNextDiv();
}
}
else if($('#second_panel_monthly').hasClass('active')) { //ONLY IF ON SECOND PANEL
if (!$('#firstName').val()) {
if ($('#firstName').parent().next('.Inval').length == 0) {
$("#firstName").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please enter first name</div>");
}
$('#firstName').focus();
focusSet = true;
}
else if (!$('#lastName').val()) {
$("#firstName").parent().next(".Inval").remove();
if ($('#lastName').parent().next('.Inval').length == 0) {
$("#lastName").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please enter last name</div>");
}
$('#lastName').focus();
focusSet = true;
}
else {
$("#firstName").parent().next(".Inval").remove();
$("#lastName").parent().next(".Inval").remove();
console.log("second panel ok");
showNextDiv();
}
}
else { // IF THIRD Panel
if (!$('#firstName2').val()) {
if ($('#firstName2').parent().next('.Inval').length == 0) {
$("#firstName2").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please enter first name</div>");
}
$('#firstName2').focus();
focusSet = true;
}
else if (!$('#lastName2').val()) {
$("#firstName2").parent().next(".Inval").remove();
if ($('#lastName2').parent().next('.Inval').length == 0) {
$("#lastName2").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please enter last name</div>");
}
$('#lastName2').focus();
focusSet = true;
}
else if(!$('#phonePanelThree').val()) {
$("#firstName2").parent().next(".Inval").remove();
$("#lastName2").parent().next(".Inval").remove();
if ($('#phonePanelThree').parent().next('.Inval').length == 0) {
$("#phonePanelThree").parent().after("<div class='Inval Input_Msg Gft_Amount_Msg'>Please enter phone number</div>");
}
$('#phonePanelThree').focus();
focusSet = true;
}
else {
$("#firstName2").parent().next(".Inval").remove();
$("#lastName2").parent().next(".Inval").remove();
console.log("third panel ok");
showNextDiv();
}
}
}); // panelcontrol button handler
}); //end of document ready
</script>
</body>
</html>
谢谢，但是如果我再添加一个面板呢？我添加了另一个面板，第三个面板上的表单没有显示。我还注意到，验证消息一次只显示在面板2的一个字段上，而不是在所有空字段上显示所有validaiton消息。小组2。对于我来说，将验证消息添加到包含活动类的所有表单，这段代码是否灵活？非常感谢您的时间添加第三个面板-复制粘贴第二个面板。由于您的代码中没有验证电话号码，因此未包含相同的号码。在第三个面板中添加了相同的验证。在所有面板的末尾，表单被提交。