如何验证此多步骤表单
Posted
技术标签:
【中文标题】如何验证此多步骤表单【英文标题】：How can I validate this multistep form 【发布时间】：2020-04-14 02:02:21 【问题描述】：我想验证第 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" >
<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" >
<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" >
<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");
);
【问题讨论】：
你可以尝试使用php会话。 【参考方案1】：创建一个我们将用来验证特定步骤的函数，我创建了validateStep(currentStep)。 currentStep 包含当前步骤的索引或编号。
由于您已经为步骤分配了特定的 ID，因此我们将通过 var targetStep = "#step-" + currentStep; 访问当前步骤。
然后，我们将从他们的.find() 所有输入中检查是否有空值或空值。 如果有空值，alert并返回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");
);
);
【讨论】：
您好，感谢您的帮助。但我检查过它不起作用 我没有收到任何错误但下一个按钮不起作用 你能检查控制台是否有错误吗？Ctrl Shift i 并转到控制台选项卡
您好，我已添加您的代码及其工作，但进度条无法正常工作。只有在我单击该步骤的继续按钮后才能工作，并且我在下面添加了一个代码，但 msg 变量没有显示在输入字段上以上是关于如何验证此多步骤表单的主要内容，如果未能解决你的问题，请参考以下文章