我目前有一个使用JavaScript进入下一步的多步骤联系表单，但我需要添加输入验证，以便它在进入下一步骤之前检查输入是否已选择或填写。因为目前，它会进入下一个步骤，而不检查是否已填写。
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50) + "%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')',
'position': 'absolute'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1 - now) * 50) + "%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function() {
return false;
})
#msform {
max-width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 100%;
margin: 0 auto;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except the first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input,
#msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
.field {
text-align: left;
width: auto !important;
border: 1px solid #81e2ff;
border-top: none;
padding: 10px;
#radio-select {
width: auto;
}
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover,
#msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
/*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after {
background: #27AE60;
color: white;
}
<form name="myform" id="msform" action="formhandler.php" method="POST" onsubmit="return validateForm()" onkeydown="return event.key != 'Enter';">
<!-- progressbar -->
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">WHERE DO YOU NEED FENCERS?</h2>
<input type="text" name="postcode" id="search_term" placeholder="Enter postcode or town/city" Autocomplete="off" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">What type of property is this for?</h2>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="property" value="House">
<label for="Property">House</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="property" value="Flat">
<label for="Property">Flat</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="property" value="Bungalow">
<label for="Property">Bungalow</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="property" value="commercial place">
<label for="Property">commercial place</label><br>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">What does this project invole?</h2>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="project" value="install a new fence">
<label for="Project">install a new fence</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="project" value="install a new gate">
<label for="Project">install a new gate</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="project" value="Repair an existing fence">
<label for="Project">Repair an existing fence</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="project" value="Repair an existing gate">
<label for="Project">Repair an existing gate</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="project" value="Replace an existing fence">
<label for="Project">Replace an existing fence</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="project" value="Replace an existing gate">
<label for="Project">Replace an existing gate</label><br>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">What material would you like for the project?</h2>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="material" value="Wood">
<label for="material">Wood</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="material" value="Steel">
<label for="material">steel</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="material" value="Vinyl">
<label for="material">Vinyl</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="material" value="Not Sure Please Recommend">
<label for="material">Not Sure Please Recommend</label><br>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">How high should the fence be?</h2>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="Under 4 Feet">
<label for="height">Under 4 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="4 Feet">
<label for="height">4 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="5 Feet">
<label for="height">5 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="6 Feet">
<label for="height">6 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="7 Feet">
<label for="height">7 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="8 Feet">
<label for="height">8 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="Over 8 Feet">
<label for="height">Over 8 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="height" value="As recommended by professional">
<label for="height">As recommended by professional</label><br>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">How long will the fence approximately be??</h2>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="Under 50 Feet">
<label for="length">Under 50 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="50-100 Feet">
<label for="length">50-100 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="100-200 Feet">
<label for="length">100-200Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="200-300 Feet">
<label for="length">200-300 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="Over 300 Feet ">
<label for="length">Over 300 Feet</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="I'm not sure">
<label for="length">I'm not sure</label><br>
</div>
<div class="field" id="property-radio">
<input type="radio" id="radio-select" name="length" value="Other">
<label for="length">Other</label><br>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">What email address would you like your quote sent to?</h2>
<input type="email" name="email" placeholder="email address" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">What is your phone number?</h2>
<input type="tel" name="phone" placeholder="Phone Number" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">What email address would you like your quote sent to?</h2>
<input type="text" name="fname" placeholder="email address" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<button type="submit" class="next action-button">Submit</button>
</fieldset>
</form>
我创建了一个可工作的fiddle，它展示了如何将jQuery Validate与您的代码一起用于步骤进展中的前两个步骤。
这就是我所做的：
加载jquery验证插件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha512-0QDLUJ0ILnknsQdYYjG7v2j8wERkKufvjBNmng/EdR/s/SE7X8cQ9y0+wMzuQT0lfXQ/NhG+zhmHNOWTUS3kMA==" crossorigin="anonymous"></script>
添加了一个数据步骤＝"#"属性/值到您的CCD_ 1元素，我们可以使用这些元素来确定当"；下一个"；按钮。
<fieldset data-step="1">
添加了类名"；属性类型"；到步骤2中的所有无线电输入。我们将使用这个类作为步骤2的验证目标，如下所示。我还将所有的ID都重命名为唯一的！(您需要在其他输入中修复此问题——我在步骤2中才修复了它们(。例如：
<input type="radio" class="property-type" id="property-type-1" name="property" value="House">
我在你的JS代码中添加了一个文档就绪函数，并将你现有的点击事件绑定移动到其中
$(document).ready(function(){
// moved your existing click event binding definitions here
});
我定义了一个全局变量msformValidation，然后在doc ready中实例化了一个存储在该变量中的新jquery验证对象。
验证规则作为参数传递给插件的instantiator函数。需要注意的是，规则是为inpu的NAME定义的。(不是输入的类型、id或类！(
msformValidation = $('#msform').validate({
submitHandler: function () { }, // prevent traditional form submission
rules:{
'postcode': { // this is the input name for the first step
required: true
},
'property': { // this is the input name of the radio group in the second step
required: true
}
}
});
现在唯一要做的就是修改函数处理程序，以便在单击下一个按钮时使用：
$(".next").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
// run the validations on the input for the current step
var validationPassed = false;
if(current_fs.data('step') == 1){
validationPassed = $('#search_term').valid();
}else if(current_fs.data('step') == 2){
validationPassed = $('.property-type').valid();
}
// check to see if the validator for the specific step we are on passed or not.
if(validationPassed == false){
// do not proceed!
animating = false;
return;
}
// .. proceed with your code..
请注意，取消使用输入名称定义规则的方式，检查特定输入是否为.valid()确实使用了输入ID，例如：$('#search_term').valid();，但无线电组除外，然后您使用一个不同的公共类名，该类名被分配给同一组中的所有输入，例如：$('.property-type').valid();。
还要注意的是，我在无线电组列表的末尾添加了一个<label>元素，以专门定位我希望任何验证错误消息显示的位置。如果我没有添加这个，那么在这种情况下，消息总是显示在第一个无线电输入的下面。
<label id="property-error" class="error" for="property"></label>
您分配给此标签的ID值很重要！这是{input NAME}-error
一旦你知道何时使用输入的名称、id和类，这个插件实际上就很容易使用了。