I have a question based on panels containing forms. How can I prevent clicking "Next" on a starting panel containing empty form fields? If the forms are filled in the first panel then the "next" button will allow the users to go to the next panel. In the code I provided, users can go from panel 1 to panel 2 when input field is empty. However, in panel 2, the user can not proceed until the forms are filled (which is why the validation message displays). I have been struggling with this issue, doing an abundance amount of research and failed to find a solution. Can anyone can please assist me based on the current code I am using. Thank you so much for your time. (also some reason when clicking submit on empty input, the tab focus on the last input instead of first)
What I tried The btnNext class allows me to go to the next panel. Therefore, the btnNext class is removed when input fields are empty. When fields are filled then the class is added, allowing users to move to the next slide. This works on panel 2. But when starting panel 1, the btnNext is present, allowing me to go to the second slide when the field is empty.
Improvement If I obtain a negative on this question, please let me know the reason in order for me to improve my question overall. Thanks,
// 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
$(document).ready(function() {
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
var $panelControlButtons =
$('#panelcontrol button')
.filter('.btnPrev')
.prop('disabled', true)
.end();
$('#panelcontrol')
.on('click', 'button', function(e) {
e.preventDefault();
switch (true) {
case $(this).hasClass('btnNext'):
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
/*----------------------------VALIDATING-------------------------*/
$('.btnNext').click(function(e) {
var focusSet = false;
// JavaScript Document
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);
}
//1 - OTHER AMOUNT
if ($('#first_panel_monthly').hasClass('active')) { //ONLY IF ON THIRD 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 {
$("#input_otherAmount").parent().next(".Inval").remove();
}
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 {
//ok
$("#input_otherAmount").parent().next(".Inval").remove();
}
// 2 - FIRST NAME
if ($('#second_panel_monthly').hasClass('active')) { //ONLY IF ON SECOND
if (!$('#firstName').val()) {
//if not valid
if ($('#firstName').parent().next('.Inval').length == 0) {
$("#firstName").parent().after("<div class='Inval Input_Msg'>Please enter first name</div>");
}
$('#firstName').focus();
focusSet = true;
} else {
//ok
$("#firstName").parent().next(".Inval").remove();
}
} else {
$("#firstName").parent().next(".Inval").remove();
}
//hides and display next button class based on value
if (focusSet) {
$("#continue_btn").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#continue_btn").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
// 3 - LAST NAME
if ($('#second_panel_monthly').hasClass('active')) {
if (!$('#lastName').val()) {
if ($('#lastName').parent().next('.Inval').length == 0) {
$("#lastName").parent().after("<div class='Inval Input_Msg'>Please enter last name</div>");
}
$('#lastName').focus();
focusSet = true;
} else {
//ok
$("#lastName").parent().next(".Inval").remove();
}
// validate email - email format
} else {
//ok
$("#lastName").parent().next(".Inval").remove();
}
//hides and display next button class based on value
if (focusSet) {
$("#continue_btn").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#continue_btn").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
});
/*------------------------------END OF VALIDATING----------------------------*/
//enable Prev button
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', false);
$('.btnPrev').css('display', 'block');
//disabled Next button
if ($newFieldset.is(':last-child')) {
$panelControlButtons
.filter('.btnNext')
/*.prop('disabled', true); */
$(':last-child').find(".btnNext").text("Place Payment"); //once last child element, btn will change text
}
break; // btnNext
case $(this).hasClass('btnPrev'):
var $newFieldset =
$fieldsets
.filter('.active') //selects the current fieldset
.hide() //hide it
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show(); //and show it
// enable Next button
$panelControlButtons
.filter('.btnNext')
.prop('disabled', false);
$(':last-child').find(".btnNext").text("Continue"); //"Next" text will be added will appear when prev is selected
// disable Prev button
if ($newFieldset.is(':first-child')) {
$panelControlButtons
.filter('.btnPrev').css('display', 'none') //Hides the prev button when going back to the first set of the panel
.prop('disabled', true);
}
break; // btn Prev
}
}); // panelcontrol button handler
});
}); //end of 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 -->
<div id="panels">
<!--Sets-->
<div class="sets" id="first_panel_monthly">
<table>
<tr>
<td>
<form>
<fieldset>
<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>
</fieldset>
</form>
</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 type="firstName" class="form-control" id="firstName" />
</div>
<div>
<label for="lastName">Last Name</label>
<input type="lastName" class="form-control" id="lastName" />
</div>
<div>
<label class="label-effect" for="phonePanelTwo">Phone Number</label>
<input type="phonePanelTwo" class="form-control" id="phonePanelTwo" />
</div>
</div>
<!--End of sets-->
</div>
<!----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>
</body>
</html>
There are nested document.ready functions in your code that I removed. I used bits and pieces of your code but not all of it. Hope this helps..