我有一个多步骤的形式,每一步,我有一个下一步按钮,并提交在最后一步。我希望下一步和提交被禁用,只有启用时,在该步骤中的所有字段已被填充,单选按钮已被选中,纹理填充,选定的部分选项。我已经尝试使用“必需的”,仍然下一个按钮的工作和形式得到提交,即使有些领域是空的。我想有一些错误处理程序,但我不知道如何。
$(function() {
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50)+"%";
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 1000,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
previous_fs.show();
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1-now) * 50)+"%";
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 1000,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
$("#msform").submit();
})
});
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin: 0;
padding: 0;
}
body{
font-family: Raleway;
}
h3{
color: #002e6d;
font-size:18px;
line-height:28.8px;
font-weight:700;
margin:0px 0px 30px;
}
#title {
color: #002e6d;
font-size:18px;
line-height:28.8px;
font-weight:700;
margin:0px 0px 30px;
}
#msform{
width: 85%;
margin: 50px auto;
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: 80%;
margin: 0 10%;
position: absolute;
}
#msform fieldset:not(:first-of-type){
display: none;
}
#msform fieldset{
text-align: left;
}
#msform textarea{
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
color: #29282d;
font-size: 17px;
border: 1px solid #aaaaaa;
border-left:6px solid #42A948;
}
#msform textarea:placeholder-shown {
border-left: 5px solid red;
}
#msform input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
color: #29282d;
font-size: 17px;
border: 1px solid #aaaaaa;
border-left:6px solid #42A948;
}
#msform input:placeholder-shown{
border-left: 5px solid red;
}
select{
width: 100%;
height: 45px;
font-size: 17px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
}
/*Errors for validation*/
textarea.invalid {
background-color: #ffdddd;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
#msform .action-button{
width: 100px;
background: #002e6d;
font-weight: 400;
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 #002e6d;
}
.fs-title{
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
font-weight:500;
}
.fs-subtitle{
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 0px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: #D2D2D2;
text-transform: capitalize;
font-size: 16px;
width: 25%;
float: left;
position: relative;
}
#progressbar li.active {
color: #002e6d;
}
#progressbar li:before{
content:'' ;/*counter(step)*/
counter-increment: step;
width: 50px;
line-height: 50px;
display: block;
font-size: 18px;
color:#fff ;
background: transparent;
border-radius: 100%;
margin: 0 auto 5px auto;
border: 2px solid #ECECEC;
}
#progressbar li:nth-child(1):before{
content:"\f129" ;
font-family: 'FontAwesome';
color: #002e6d;
}
#progressbar li:nth-child(2):before{
content:"\f015" ;
font-family: 'FontAwesome';
color: #80858a;
border: 2px solid #80858a;
}
#progressbar li:nth-child(3):before{
content:"\f007" ;
font-family: 'FontAwesome';
color: #80858a;
border: 2px solid #80858a;
}
#progressbar li:nth-child(4):before{
content:"\f15c" ;
font-family: 'FontAwesome';
color: #80858a;
border: 2px solid #80858a;
}
#progressbar li:after {
content: '';
width: 73%;
height: 2px;
background: #ECECEC;
position: absolute;
left: -35%;
top: 25px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before {
border: 2px solid #002e6d;
color: white;
background-color:#002e6d;
/* content: "\f164";*/
}
#progressbar li.active:after {
background: #002e6d;
color: white;
}
.form_holder {
text-align: center;
margin: 30px 0 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="form_holder">
<h2 class="fs-title" style="color: red;">MULTI STEP FORM WITH PHP, JS AND CSS</h2>
<hr>
<form id="msform" action="app.php" method="POST">
<ul id="progressbar">
<li class="active">Step one</li>
<li>Step Two</li>
<li>Step Three</li>
<li>Step Four</li>
</ul>
<fieldset>
<h3>THIS IS IS A MULTIPLE STEP FORM</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 class="fs-title" id="title">Step one</h2>
<h3 class="fs-subtitle">Step 1 of 4</h3>
<h3>Q1a. Pick one of the following</h3>
<input type="radio" name="qualification1" value="Applicant is an individual."> This one.
<br>
<input type="radio" name="qualification1" value="Applicant is an existing business with not more than 500 employees." required="" checked=""> Or this one.
<br>
<br>
<br>
<hr>
<h3>Q1b. Review and Check All of the Following:</h3>
<p><strong>All the followingmust be checked.</strong></p>
<br>
<input type="checkbox" name="qualification2c" required="" value="Applicant is not in the business of lobbying.">  This one.
<br>
<input type="checkbox" name="qualification2d" required="" value="Is an adult of sound mind.">  And this one.
<br>
<hr>
<p>This NEXT button should be inactive until on radio is check in q1. and all checkbox marked in Q2.</p>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h3>Step Two</h3>
<h3 class="fs-subtitle">Step 2 of 4</h3>
<p>Q2a(text type)<br>
<input placeholder=" " oninput="this.className = ''" type="text" name=" " required="" style="width:100%;"></p>
<p>Q2b checkbox type<br>
<input type="radio" name="q2b" value="Yes" required="" checked=""> Yes
<input type="radio" name="q2b" value="No"> NO </p>
<p>Q2c select typeOrganization structure<br>
<select name="q2c" required="" placeholder="Choose One">
<option value="" disabled selected> Select your option</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</p>
<p>Detailed activity undertaken<textarea name="activity-details" required="" placeholder=" "></textarea></p>
<p>Date<br><input placeholder=" " oninput="this.className = ''" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'" name="" required=""style="width:100%;"></p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h3>Step Three</h3>
<h3 class="fs-subtitle">Step 3 of 4</h3>
<p>Email<br><input placeholder=" " oninput="this.className = ''" type="mail" name="" required=""style="width:100%;"></p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h3>Step Four</h3>
<h3 class="fs-subtitle">Step 4 of 4</h3>
<p> Radio button</p>
<input type="radio" name="q4a" value="Yes" required="" checked=""> Yes
<input type="radio" name="q4a" value="No"> No
<p><input type="checkbox" id="terms_and_conditions" value="I agree to the Terms and Conditions" name="agreement" />I agree to the Terms and Conditions</p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<!--input type="submit" name="submit" class="submit action-button" value="Submit" />-->
<button type="submit" class="submit action-button">Submit</button>
</fieldset>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3/js/jquery.easing.min.js"></script>
<script src="./formscript.js"></script>
</body>
</html>
1条答案
按热度按时间xytpbqjk1#
我不是一个jqueryMaven,所以我用纯js(Vanila Js)插入了我的代码。所以如果你有任何疑问,你可以问。