[英]How do I validate field-yield is populated before moving onto the next step in a multi-stage form?
My apologies, I am certain this is a simple solution.抱歉,我确信这是一个简单的解决方案。 However, the community has been so kind in the past, so I thought I would see if someone could point me in the right direction.
但是,社区过去一直很友善,所以我想我会看看是否有人可以为我指明正确的方向。
We utilise an external piece of software for managing our database and hosting our data capture forms.我们使用外部软件来管理我们的数据库和托管我们的数据捕获 forms。 This solution limits us to calling field yields when we build our forms.
此解决方案限制我们在构建 forms 时调用字段产量。
So my HTML for a multi step form may look something like this:所以我的 HTML 的多步骤表格可能看起来像这样:
<form id="form-1">
<fieldset id="step1">
<h3> Are you Male or Female?</h3>
<field-yield data-field="F_901_ONLINE_GENDER"></field-yield>
</fieldset>
<fieldset id="step2" style="display:none">
<h3 style="font-family:poppins;"> Please tell us about you?</h3>
<field-yield data-field="F_3_FIRSTNAME"></field-yield>
<field-yield data-field="F_4_LASTNAME"></field-yield>
</fieldset>
<fieldset id="step3" style="display:none;">
<h3> Please find your Address</h3>
<div data-option="UK_ADDRESS_LOOKUP">
<label data-db-localized-content="UK_ADDRESS_LOOKUP_LABEL"></label>
<div class="input">
<input class="PCODE" name="UK_ADDRESS_LOOKUP_POSTCODE" type="text" placeholder="" data-db-localized-placeholder="UK_ADDRESS_LOOKUP_PLACEHOLDER" value=""required><br>
<button class="mbbutton" type="button" data-db-localized-content="UK_ADDRESS_LOOKUP_LOOKUP_BUTTON"></button> <br>
<select class="form-control" name="UK_ADDRESS_LOOKUP_ADDRESS" type="text" placeholder="" required>
<option is-placeholder data-db-localized-content="UK_ADDRESS_LOOKUP_ADDRESS_PLACEHOLDER"></option>
</select>
</div> <br><br>
</div><field-yield data-field="F_9_TOWNCITY"></field-yield><field-yield data-field="F_6_ADDRESS1"></field-yield><field-yield data-field="F_11_POSTCODE"></field-yield>
<input type="submit"style="display:none;" data-db-localized-value="FORM_SUBMIT">
</fieldset>
<div class="col-12">
<br>
<button type="button" id="next">Start Quote!</button>
<p style="height: 40px;text-align:left;padding-left: 10px;padding-bottom: 0px;margin-bottom: -25px;"><button class="customBackBtn previous shadow" style="display:none;font-size:15px!important" id="previous" type="button"> <i class="fas fa-arrow-circle-left"></i> <strong>Back</strong></button></p><br>
</form>
The system has inbuilt checks that make the field yields "required" However, it would appear that these only operate on the "submit button" so if a user skips through to the end, missing a filed on step1 the form does not submit, it also doesn't display the error message coded into the field yields.系统具有使该字段产生“必需”的内置检查但是,这些似乎仅在“提交按钮”上操作,因此如果用户跳过到最后,错过了第 1 步中的一个文件,则表单不会提交,它也不显示编码到字段产量中的错误消息。
As you can imagine, this is rubbish UX and so we lose a lot of form completions.正如你可以想象的那样,这是垃圾用户体验,所以我们丢失了很多表单完成。
What I am looking to achieve is code that validates that all fields in each step are populated before moving to the next step, preventing users from getting to a submit button that won't function.我希望实现的是验证每个步骤中的所有字段在进入下一步之前都已填充的代码,从而防止用户进入不会 function 的提交按钮。
current JS is:当前的JS是:
$(function () {
var currentPage = 1;
var maxPage = 3; //if additional fieldset steps add the max page here i.e., if 7 pages maxPage = 7
$("#next").click(function () {
if (currentPage < maxPage) {
var nextPage = currentPage + 1;
} else {
return; //if already at max page
}
trackProgress(100 * ((nextPage - 1) / maxPage).toFixed(1) + '%'); //get rid of decimal points (make a whole number)
$("#step" + currentPage).hide();
$("#step" + nextPage).show();
$("#previous").show();
currentPage = nextPage;
if (currentPage === maxPage) {
$('#next').hide()
$('input[type="submit"]').delay(2000).show(0);
$('#thanks').delay(2000).show(0);
// Show submit button & thank you paragraph
}
});
$("#previous").click(function () {
if (currentPage !== 1) {
$('#spinner').removeClass('hidden')
var prevPage = currentPage - 1;
} else {
return;
}
trackProgress(100 * ((prevPage - 1) / maxPage).toFixed(1) + '%');
$("#step" + currentPage).hide();
$("#step" + prevPage).show();
$('input[type="submit"]').hide();
$('#thanks').hide();
$("#next").show();
currentPage = prevPage;
if (currentPage === 1) {
$('#previous').hide()
}
})
});
This allows both a progress bar to work, a back button for traversing the form and show/hide for each step.这允许进度条工作,用于遍历表单的后退按钮和显示/隐藏每个步骤。 I wanted to add something like the following to the following to validate field completion.
我想在以下内容中添加类似以下内容以验证字段完成。
if ($('input[name="F_901_ONLINE_GENDER"]').val() == '' && $('input[name="F_3_FIRSTNAME"]').val() == '' && $('input[name="F_4_LASTNAME"]').val() == ''){
alert('Please complete all questions');
However this is not working and I am at a loss as to what to try next.但是,这不起作用,我不知道接下来要尝试什么。
Thank you in advance for any assistance!提前感谢您的任何帮助!
I don't know how your system replaces <field-yield>
tags, but I guess there will be typical form fields.我不知道您的系统如何替换
<field-yield>
标记,但我想会有典型的表单字段。 So you need to write some general validation function, which will validate all fields in step and allow users to move on the next step if validation passed.所以你需要编写一些通用的验证 function,它将一步一步验证所有字段,如果验证通过,则允许用户继续下一步。
Function to validate all input fields in step: Function 在步骤中验证所有输入字段:
function validateStep(step) {
var stepWrapper = $('fieldset#step'+step);
var emptyFields = 0;
$('input[type="text"], select, textarea', stepWrapper).each(function(i, el) {
if ($(el).val() == '') {
emptyFields++;
return false;
}
});
//check radio buttons
var radioGroups = {};
//group radio buttons by name
$(':radio', stepWrapper).each(function() {
radioGroups[this.name] = true;
});
//count "checked" radio buttons in groups
for (var radioName in radioGroups) {
var checked = !!$(':radio[name="'+radioName+'"]:checked', stepWrapper).length;
if (!checked) {
emptyFields++;
}
}
return emptyFields;
}
now you have step validation, the only thing you need to is call this function before step change:现在您有了步骤验证,您唯一需要做的就是在步骤更改之前调用此 function:
$("#next").click(function () {
//validate before move
if (validateStep(currentPage)) {
alert("Please fill all fields before move to next step!");
return false;
}
if (currentPage < maxPage) {
var nextPage = currentPage + 1;
} else {
return; //if already at max page
}
//... rest of your code
}
Hope this helps you.希望这对您有所帮助。
UPDATE: Here is a working example of your page form: https://codepen.io/zur4ik/pen/LYYqjgM I had a mistake in each loop.更新:这是您的页面表单的一个工作示例: https://codepen.io/zur4ik/pen/LYYqjgM我在每个循环中都有一个错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.