我想验证步骤编号 6。用户在填写当前步骤之前无法进入下一步。这意味着当用户单击“继续”而不填写出生日期字段时，将会出现“此字段为必填”之类的警告。
当我尝试验证但没有成功时。无需验证当前步骤，用户就可以轻松进入下一步。
<!-- Step 1 -->
<div id="step-1" class="p-5 lg animated">
<div class="app-inner">
<h3 class="mb-5">What Vehicle Would You Like?</h3>
<div class="app-row lg">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list cols3">
<div data-step="1" class="custom-box custom-box-clicked">
<input name="vehicle" value="Car" type="checkbox" id="car" checked>
<label class="checkbox-label" for="car">
<img src="images/car-1.jpg" alt="Car">
<div class="img-title">Car</div>
</label>
</div>
</div>
<div class="app-list cols3">
<div data-step="1" class="custom-box">
<input name="vehicle" value="Suv" type="checkbox" id="bus">
<label class="checkbox-label" for="bus">
<img src="images/van-1.jpg" alt="Sub">
<div class="img-title">SUV</div>
</label>
</div>
</div>
<div class="app-list cols3">
<div data-step="1" class="custom-box">
<input name="vehicle" value="Motorbike" type="checkbox" id="bike">
<label class="checkbox-label" for="bike">
<img src="images/bike-1.jpg" alt="Bike">
<div class="img-title">Motorbike</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="2" class="app-btn next" onclick="what_vehicle()">Continue</button>
</div>
<div class="button-btm-text">
Don’t worry, you can change your mind about the kind of vehicle you want at any time.
</div>
</div>
<!-- Step 2 -->
<div id="step-2" class="p-5 md animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">What Is Your Monthly Budget?</h3>
<div class="app-row md">
<div class="app-list-wrap-inner">
<div class="app-list cols2">
<div data-step="2" class="custom-box custom-box-clicked" data-value="Under £150/month">
<div class="radio-toolbar">
<input type="radio" id="budget1" name="budget" value="Under £150/month" checked>
<label for="budget1">Under £150/month</label>
</div>
</div>
</div>
<div class="app-list cols2">
<div data-step="2" class="custom-box" data-value="Under £150 - £250/month">
<div class="radio-toolbar">
<input class='radio' type="radio" id="budget2" name="budget" value="Under £150 - £250/month">
<label for="budget2">Under £150 - £250/month</label>
</div>
</div>
</div>
<div class="app-list cols2">
<div data-step="2" class="custom-box" data-value="Under £251 - £350/month">
<div class="radio-toolbar">
<input class='radio' type="radio" id="budget3" name="budget" value="Under £251 - £350/month">
<label for="budget3">Under £251 - £350/month</label>
</div>
</div>
</div>
<div class="app-list cols2">
<div data-step="2" class="custom-box" data-value="Over £350/month">
<div class="radio-toolbar">
<input class='radio' type="radio" id="budget4" name="budget" value="Over £350/month">
<label for="budget4">Over £350/month</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="1" class="app-btn prev">Previous</button>
<button data-step="3" class="app-btn next" id="p_pusher2_3">Continue</button>
</div>
<div class="button-btm-text">
Your desired monthly budget can help us better determine an appropriate loan program for you
</div>
</div>
<!-- Step 3 -->
<div id="step-3" class="p-5 animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">Are You Currently Driving a Vehicle?</h3>
<div class="app-row">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list cols3">
<div data-step="3" class="custom-box custom-box-clicked" data-value="No">
<div class="radio-toolbar">
<input type="radio" id="driveVehicle1" name="driveVehicle" value="No" checked>
<label for="driveVehicle1">No</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="3" class="custom-box" data-value="Yes, I want to keep it">
<div class="radio-toolbar">
<input type="radio" id="driveVehicle2" name="driveVehicle" value=" Yes, I want to keep it">
<label for="driveVehicle2"> Yes, I want to keep it</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="3" class="custom-box" data-value="Yes, I want to trade it in">
<div class="radio-toolbar">
<input type="radio" id="driveVehicle3" name="driveVehicle" value=" Yes, I want to trade it in">
<label for="driveVehicle3"> Yes, I want to trade it in</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="2" class="app-btn prev" id="p_pusher3_2">Previous</button>
<button data-step="4" class="app-btn next">Continue</button>
</div>
<div class="button-btm-text">
We can get you pre-approved with or without a trade in.
</div>
</div>
<!-- Step 4 -->
<div id="step-4" class="p-5 animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">What Is Your Estimated Credit Rating?</h3>
<div class="app-row">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list cols3">
<div data-step="4" class="custom-box custom-box-clicked" data-value="Good">
<div class="radio-toolbar">
<input type="radio" id="rating1" name="creditRating" value="Good" checked>
<label for="rating1">Good</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="4" class="custom-box" data-value="Fair">
<div class="radio-toolbar">
<input type="radio" id="rating2" name="creditRating" value="Fair">
<label for="rating2">Fair</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="4" class="custom-box" data-value="Poor">
<div class="radio-toolbar">
<input type="radio" id="rating3" name="creditRating" value="Poor">
<label for="rating3">Poor</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="4" class="custom-box" data-value="Very Poor">
<div class="radio-toolbar">
<input type="radio" id="rating4" name="creditRating" value="Very Poor">
<label for="rating4">Very Poor</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="4" class="custom-box" data-value="Current Bankcruptcy">
<div class="radio-toolbar">
<input type="radio" id="rating5" name="creditRating" value="Current Bankcruptcy">
<label for="rating5">Current Bankcruptcy</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="4" class="custom-box" data-value="No Credit">
<div class="radio-toolbar">
<input type="radio" id="rating6" name="creditRating" value="No Credit">
<label for="rating6">No Credit</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="3" class="app-btn prev">Previous</button>
<button data-step="5" class="app-btn next">Continue</button>
</div>
<div class="button-btm-text">
Your estimated credit rating helps us determined the appropriate loan program for you.
</div>
</div>
<!-- Step 5 -->
<div id="step-5" class="p-5 md animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">Are You Interested In No Deposit Options?</h3>
<div class="app-row">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list cols3">
<div data-step="5" class="custom-box custom-box-clicked" data-value="Yes">
<div class="radio-toolbar">
<input type="radio" id="depositOption1" name="depositOption" value="Yes" checked>
<label for="depositOption1">Yes</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="5" class="custom-box" data-value="No">
<div class="radio-toolbar">
<input type="radio" id="depositOption2" name="depositOption" value="No">
<label for="depositOption2">No</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="4" class="app-btn prev">Previous</button>
<button data-step="6" class="app-btn next">Continue</button>
</div>
<div class="button-btm-text">
We have no deposit options available, making it even easier for you to get the car you want.
</div>
</div>
<!-- Step 6 -->
<div id="step-6" class="p-5 animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">Are You Old Enough to Get Financing?</h3>
<div class="app-row">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list text-center">
<label class="label-text">Date of Birth</label><span id="error" style="color: red;"></span>
<div data-step="6" class="custom-box app-input-container dob">
<input name="dob" type="date" id="dob" placeholder="DD / MM / YYYY">
</div>
<span class="app-input-hint">DD / MM / YYYY</span>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="5" class="app-btn prev">Previous</button>
<button data-step="7" class="app-btn next" id="dateOfBirthValidation" disabled>Continue</button>
</div>
<div class="button-btm-text">
To be eligible to submit an application, you must be 18 or older.
</div>
</div>
<!-- Step 7 -->
<div id="step-7" class="p-5 animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">Where Are You Looking for a Vehicle?</h3>
<div class="app-row">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list text-center">
<label class="label-text">Home Address<span id="erroraddress" style="color: red;"></span></label>
<div data-step="7" class="custom-box app-input-container home">
<input type="text" name="homeaddress" id="search_input" placeholder="Begin Typing Adress Here">
<input type="hidden" id="latitude_input" />
<input type="hidden" id="longitude_input" />
</div>
</div>
</div>
</div>
</div>
<div class="address-selection-message" id="addressSelectionMessage">
<p>The Address you have selected is: </p>
<p class="message" id="addrMessage"></p>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="6" class="app-btn prev" id="p_pusher7_6">Previous</button>
<a href="#cngpopup" rel="modal:open"><button data-step="8" class="app-btn app-btn next mt-5" id="lookingVehicle">Continue</button></a>
</div>
<div class="button-btm-text">
Available programs vary based on where you live. Please help us find the most convenient option for you by entering your home mailing address above.
</div>
</div>
<!-- Step 8 -->
<div id="step-8" class="p-5 animated slideInRight" style="display: none;">
<div class="app-inner">
<h3 class="mb-5">What Is Your Residential Status?</h3>
<div class="app-row">
<div class="app-list-wrap">
<div class="app-list-wrap-inner">
<div class="app-list cols3">
<div data-step="8" class="custom-box custom-box-clicked" data-value="Homeowner">
<div class="radio-toolbar">
<input type="radio" id="resiStatus1" name="resiStatus1" value="Homeowner" checked>
<label for="resiStatus1">Homeowner</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Private Tenant (Furnished)">
<div class="radio-toolbar">
<input type="radio" id="resiStatus2" name="resiStatus1" value="Private Tenant (Furnished)">
<label for="resiStatus2">Private Tenant (Furnished)</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Private Tenant (Unfurnished)">
<div class="radio-toolbar">
<input type="radio" id="resiStatus3" name="resiStatus1" value="Private Tenant (Unfurnished)">
<label for="resiStatus3">Private Tenant (Unfurnished)</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Council Tenant">
<div class="radio-toolbar">
<input type="radio" id="resiStatus4" name="resiStatus1" value="Council Tenant">
<label for="resiStatus4">Council Tenant</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Living With Parents">
<div class="radio-toolbar">
<input type="radio" id="resiStatus5" name="resiStatus1" value="Living With Parents">
<label for="resiStatus5">Living With Parents</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Living With Family">
<div class="radio-toolbar">
<input type="radio" id="resiStatus6" name="resiStatus1" value="Living With Family">
<label for="resiStatus6">Living With Family</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Joint Owner">
<div class="radio-toolbar">
<input type="radio" id="resiStatus7" name="resiStatus1" value="Joint Owner">
<label for="resiStatus7">Joint Owner</label>
</div>
</div>
</div>
<div class="app-list cols3">
<div data-step="8" class="custom-box " data-value="Other">
<div class="radio-toolbar">
<input type="radio" id="resiStatus8" name="resiStatus1" value="Other">
<label for="resiStatus8">Other</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-btn-wrap">
<button data-step="7" class="app-btn prev">Previous</button>
<button data-step="9" class="app-btn app-btn next mt-5">Continue</button>
</div>
<div class="button-btm-text">
Your address details help us determine a suitable budget and loan amount for you.
</div>
</div>
这是我的下一步和上一步以及进度条工作代码的 jquery。
$('.next').click(function () {
var pgrbar = $('.progress-bar').width();
var nextStep = $(this).data('step');
var currentStep = nextStep - 1;
var pgrbar = nextStep * 5.56;
$('.progress-bar').width(pgrbar + '%');
$('#step-' + currentStep).hide();
$('#step-' + nextStep).show();
$('#step-' + nextStep).removeClass("slideInLeft").addClass("slideInRight");
});
$('.prev').click(function () {
var pgrbar = $('.progress-bar').width();
var prevStep = $(this).data('step');
var currentStep = prevStep + 1;
var pgrbar = prevStep * 5.56;
$('.progress-bar').width(pgrbar + '%');
$('#step-' + currentStep).hide();
$('#step-' + prevStep).show();
$('#step-' + prevStep).removeClass("slideInRight").addClass("slideInLeft");
});
最佳答案
创建一个我们将用来验证特定步骤的函数，我创建了validateStep(currentStep)。 currentStep 包含当前步骤的索引或编号。
由于您已经为步骤分配了特定 ID，因此我们将通过 var targetStep = "#step-"+ currentStep; 访问当前步骤。
然后，我们将.find()所有输入并检查是否存在 null 或空值。 如果有空值，则发出警报并返回 false，不会继续下一步。
使用下面的脚本；
$(document).ready(function() {
function validateStep(currentStep) {
var validate = true;
var targetStep = "#step-" + currentStep;
$(targetStep).find("input").each(function() {
if ($(this).val().length == 0 || $(this).val() == null) {
alert($(this).attr("name") + " is required.");
validate = false;
}
})
return validate;
}
$('.next').click(function() {
var pgrbar = $('.progress-bar').width();
var nextStep = $(this).data('step');
var currentStep = nextStep - 1;
var pgrbar = nextStep * 5.56;
$('.progress-bar').width(pgrbar + '%');
if (validateStep(currentStep)) {
$('#step-' + currentStep).hide();
$('#step-' + nextStep).show();
$('#step-' + nextStep).removeClass("slideInLeft").addClass("slideInRight");
}
});
$('.prev').click(function() {
var pgrbar = $('.progress-bar').width();
var prevStep = $(this).data('step');
var currentStep = prevStep + 1;
var pgrbar = prevStep * 5.56;
$('.progress-bar').width(pgrbar + '%');
$('#step-' + currentStep).hide();
$('#step-' + prevStep).show();
$('#step-' + prevStep).removeClass("slideInRight").addClass("slideInLeft");
});
});
关于javascript - 我如何验证这个多步骤表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59444183/