如何在下一步验证多步骤表单，最后在提交时验证？
目前我的代码仅使用提交按钮验证最后一步，但不验证表单的上一步。
这是我的.php
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>NGS Requisition Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#service").change(function() {
// foo is the id of the other select box
if ($(this).val() == "WES") {
$("#analyses").show();
}else{
$("#analyses").hide();
}
});
});
$(document).ready(function (){
$("#service").change(function() {
// foo is the id of the other select box
if ($(this).val() == "IDP") {
$("#idp").show();
}else{
$("#idp").hide();
}
});
});
$(document).ready(function (){
$("#service").change(function() {
// foo is the id of the other select box
if ($(this).val() == "ICP") {
$("#icp").show();
}else{
$("#icp").hide();
}
});
});
$(document).ready(function (){
$("#service").change(function() {
// foo is the id of the other select box
if ($(this).val() == "STP") {
$("#stp").show();
}else{
$("#stp").hide();
}
});
});
</script>
</head>
<body>
<!-- Header form -->
<h1 class="top-title"> Genomics Requisition Form </h1>
<h3 class="info-title"> * Please ensure ALL the information is thoroughly filled out. </h3>
<!-- multistep form -->
<form id="msform" action="test.php">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Patient Information</li>
<li>Medical Information</li>
<li>Specimen Information</li>
<li>Physician Information</li>
<li>Requester Information</li>
</ul>
<!-- fieldsets -->
<fieldset id="fieldset1">
<h2 class="fs-title">Patient Information</h2>
<h3 class="fs-subtitle">Step 1/5</h3>
<table width=50% align="right"><tr>
<td><h3 class="ft-subtitle">Male </h3><input type="radio" name="gender" value="male"> </td>
<td><h3 class="ft-subtitle">Female </h3><input type="radio" name="gender" value="female"></td>
</tr></table>
<input type="text" name="pname" placeholder="Patient Full Name" required />
<input type="text" name="pmrn" placeholder="Medical Record N°" />
<h3 class="ft-subtitle" align="left">DOB</h3>
<input type="date" name="pdob" required />
<input type="text" name="peid" placeholder="Emirates ID" required />
<input type="text" name="ptel" placeholder="Phone" />
<input type="email" name="pemail" placeholder="E-mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset id="fieldset2">
<h2 class="fs-title">Medical Information</h2>
<h3 class="fs-subtitle">Step 2/5</h3>
<select name="suspdiag">
<option value="">-- Suspected diagnosis --</option>
<option value="Comprehensive Autism">Comprehensive Autism</option>
<option value="Comprehensive Cardio-vascular">Comprehensive Cardio-vascular</option>
<option value="Comprehensive Cardio-myopathy">Comprehensive Cardio-myopathy</option>
<option value="Sudden Cardiac Arrest">Sudden Cardiac Arrest</option>
<option value="Cystic Fibrosis">Cystic Fibrosis</option>
<option value="Diabetes MODY">Diabetes MODY</option>
<option value="Comprehensive Epilepsy">Comprehensive Epilepsy</option>
<option value="Gastro-Intestinal">Gastro-Intestinal</option>
<option value="Mitochondrial Disorder(Nuclear genes only)">Mitochondrial Disorder(Nuclear genes only)</option>
<option value="Mitochondrial Disorder (Mitochondrial Genome)">Mitochondrial Disorder (Mitochondrial Genome)</option>
<option value="Congenital Muscular Dystrophy">Congenital Muscular Dystrophy</option>
<option value="LGMD Muscular Dystrophy">LGMD Muscular Dystrophy</option>
<option value="Neuro-Muscular">Neuro-Muscular</option>
<option value="Pulmonary Disease">Pulmonary Disease</option>
<option value="Blood Disorder">Blood Disorder</option>
<option value="Deafness">Deafness</option>
<option value="Dysmorphic - Dysplasia">Dysmorphic - Dysplasia</option>
<option value="Endocrine Disorder">Endocrine Disorder</option>
<option value="Metabolic Disorder">Metabolic Disorder</option>
<option value="Neurological Disorder">Neurological Disorder</option>
<option value="Pelvic Inflammatory Disease">Pelvic Inflammatory Disease</option>
<option value="Renal Disease">Renal Disease</option>
<option value="Visual Disorder">Visual Disorder</option>
<option value="Warfarin sensitivity">Warfarin sensitivity</option>
<option value="Inherited Breast Cancer">Inherited Breast Cancer</option>
<option value="Comprehensive Inherited Cancer">Comprehensive Inherited Cancer</option>
<option value="Somatic Cancer">Somatic Cancer</option>
</select>
<textarea rows="2" name="phistory" placeholder="Medical History (current disorder)" required></textarea>
<textarea rows="2" name="ptrt" placeholder="Current treatments"></textarea>
<textarea rows="2" name="pclinical" placeholder="Other relevant clinical history"></textarea>
<h3 class="ft-subtitle" align="left">Previous Genetic testing performed ?</h3>
<br>
<table width=50% align="right"><tr>
<td><h3 class="ft-subtitle">No </h3><input type="radio" name="ptest" value="no" checked> </td>
<td><h3 class="ft-subtitle">YES </h3><input type="radio" name="ptest" value="yes"></td>
</tr></table>
<br><br>
<h3 class="ft-subtitle" align="left">If YES, please give more information</h3>
<br>
<input type="text" name="ptestinfo" placeholder="other test" />
<h3 class="ft-subtitle" align="left">Please indicate if your are :</h3>
<br>
<table width=50% align="right"><tr>
<td><h3 class="ft-subtitle">Proband </h3><input type="radio" name="proband" value="yes" checked> </td>
<td><h3 class="ft-subtitle">Family member </h3><input type="radio" name="proband" value="no"></td>
</tr></table>
<br><br>
<h3 class="ft-subtitle" align="left">If Family member, please give proband Emirate ID°</h3>
<br>
<textarea rows="2" name="fmeid" placeholder="Emirates ID N°1 , Emirates ID N°2 , Emirates ID N°3 ..."></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset id="fieldset3">
<h2 class="fs-title">Specimen Information</h2>
<h3 class="fs-subtitle">Step 3/5</h3>
<input type="text" name="stype" placeholder="Specimen Type (Blood, Swab ...)" required/>
<input type="text" name="sorigin" placeholder="Site of origin (If relevant)" />
<h3 class="ft-subtitle" align="left">Number of samples</h3>
<select id="nbsample" name="nbsample" required>
<option value="">-- Select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br><br>
<h3 class="ft-subtitle" align="left">Collection date & time</h3>
<input type="datetime-local" name="colltime" value="2017-09-18T10:00" required/>
<input type="text" name="collby" placeholder="Collected by" />
<br><br>
<select id="service" name="service" required>
<option value="">-- Assay Requested--</option>
<option value="WGS">Whole Genome Sequencing (HGG-125)</option>
<option value="WES">Whole exome Sequencing</option>
<option value="IDP">INHERITED DISORDERS – TARGETED PANELS</option>
<option value="ICP">INHERITED CANCER PANELS</option>
<option value="STP">SOLID TUMOUR PANELS</option>
</select>
<p id="analyses" style="display:none;">
<select id="bioinfo" name="bioinfo">
<option value="">-- Select --</option>
<option value="HGE-126">Full bioinformatics analysis (HGE-126)</option>
<option value="HGE-127">FASTQ data only (HGE-127)</option>
</select>
</p>
<p id="idp" style="display:none;">
<select id="panelx" name="panelx" >
<option value="">-- Select --</option>
<option value="HGT-128">Comprehensive Autism (HGT-128)</option>
<option value="HGT-129">Comprehensive Cardio-vascular (HGT-129)</option>
<option value="HGT-130">Comprehensive Cardio-myopathy (HGT-130)</option>
<option value="HGT-131">Sudden Cardiac Arrest (HGT-131)</option>
<option value="HGT-132">Cystic Fibrosis (HGT-132)</option>
<option value="HGT-133">Diabetes MODY (HGT-133)</option>
<option value="HGT-134">Comprehensive Epilepsy (HGT-134)</option>
<option value="HGT-135">Gastro-Intestinal (HGT-135)</option>
<option value="HGT-136">Mitochondrial Disorder(Nuclear genes only) (HGT-136)</option>
<option value="HGT-137">Mitochondrial Disorder (Mitochondrial Genome) (HGT-137)</option>
<option value="HGT-138">Congenital Muscular Dystrophy (HGT-138)</option>
<option value="HGT-139">LGMD Muscular Dystrophy (HGT-139)</option>
<option value="HGT-140">Neuro-Muscular (HGT-140)</option>
<option value="HGT-141">Pulmonary Disease (HGT-141)</option>
<option value="HGT-142">Blood Disorder (HGT-142)</option>
<option value="HGT-143">Deafness (HGT-143)</option>
<option value="HGT-144">Dysmorphic - Dysplasia (HGT-144)</option>
<option value="HGT-145">Endocrine Disorder (HGT-145)</option>
<option value="HGT-146">Metabolic Disorder (HGT-146)</option>
<option value="HGT-147">Neurological Disorder (HGT-147)</option>
<option value="HGT-148">Pelvic Inflammatory Disease (HGT-148)</option>
<option value="HGT-149">Renal Disease (HGT-149)</option>
<option value="HGT-150">Visual Disorder (HGT-150)</option>
<option value="HGT-151">Warfarin sensitivity (HGT-151)</option>
</select>
</p>
<p id="icp" style="display:none;">
<select id="panely" name="panely">
<option value="">-- Select --</option>
<option value="HGC-152">Inherited Breast Cancer (HGC-152)</option>
<option value="HGC-153">Comprehensive Inherited Cancer (HGC-153)</option>
</select>
</p>
<p id="stp" style="display:none;">
<select id="panelz" name="panelz">
<option value="">-- Select --</option>
<option value="HGC-154">Somatic Cancer 15 genes Panel (HGC-154)</option>
<option value="HGC-155">Somatic Cancer 26 genes Panel (HGC-155)</option>
<option value="HGC-156">Somatic Cancer 170 genes Panel (HGC-156)</option>
</select>
</p>
<br><br>
<h3 class="ft-subtitle" align="left">Reception date & time</h3>
<input type="datetime-local" name="rectime" value="2017-09-18T12:00" required/>
<select id="recby" name="recby" required>
<option value="">-- Received by --</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="RZ">RZ</option>
<option value="SP">SP</option>
<option value="JA">JA</option>
</select>
<br><br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset id="fieldset4">
<h2 class="fs-title">Physician Information</h2>
<h3 class="fs-subtitle">Step 4/5</h3>
<input type="text" name="physician" placeholder="Physician Name" required />
<input type="text" name="phyorganisation" placeholder="Organisation" required />
<input type="text" name="phyphone" placeholder="Phone" required />
<input type="text" name="phyfax" placeholder="Fax" required />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset id="fieldset5">
<h2 class="fs-title">Requester Information</h2>
<h3 class="fs-subtitle">Step 5/5</h3>
<input type="text" name="requester" placeholder="Requester Name" required />
<input type="text" name="reqorganisation" placeholder="Organisation" required />
<input type="text" name="reqphone" placeholder="Phone" required />
<input type="text" name="reqfax" placeholder="Fax" required />
<input type="email" name="reqemail" placeholder="Email" required />
<input type="text" name="reqaddress" placeholder="Address" />
<br><br>
<h3 class="ft-subtitle" align="left">Report must be released to </h3>
<select id="sendto" name="sendto" required>
<option value="">-- Select --</option>
<option value="Physician">Physician</option>
<option value="Requester">Requester</option>
</select>
<br><br>
<h3 class="ft-subtitle" align="left">Via </h3>
<select id="sendby" name="sendby" required>
<option value="">-- Select --</option>
<option value="HGC-154">Fax</option>
<option value="HGC-154">E-mail</option>
<option value="HGC-155">Direct collection</option>
<option value="HGC-156">courier</option>
</select>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" value="Submit" name="submit" class="submit action-button" />
</fieldset>
</form>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
这是我的.js
//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 true;
})
这是我的.css
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 800px;
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: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
}
/*Hide all except 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;
}
#msform select {
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;
background: #ffffff;
}
/*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*/
.top-title {
font-size: 35px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 5px;
margin-top: 50px;
text-align: center;
}
.info-title {
font-size: 15px;
color: #ffffff;
margin-bottom: 5px;
margin-top: 10px;
text-align: center;
}
.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;
}
.ft-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
}
/*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: 11px;
width: 20%;
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;
}
请有人帮助我，我不是js代码的专家
我知道我需要添加一些功能来分别控制每个字段的有效性
谢谢
答案 0 :(得分：0)
首先，你不必在你使用的每个功能上使用$（document）.ready ..
你可以有一个$（文件）.ready
尝试
$（＆＃34; #progressbar li＆＃34;）。eq（$（＆＃34; fieldset＆＃34;）。index（next_fs））。addClass（＆＃34; active＆＃34;）; < / p>
添加：
var inputs = current_fs.find(':input');
for(var i = 0; i< inputs.length; i++) {
var element = inputs[i];
// validate elements..
// for example for required:
if(element.hasAttribute('required')) {
if($(element).val() == '') {
alert('a field is required');
// or do whatever you want with it..
}
}
}
var inputs = current_fs.find(':input');
for(var i = 0; i< inputs.length; i++) {
var element = inputs[i];
// validate elements..
// for example for required:
if(element.hasAttribute('required')) {
if($(element).val() == '') {
alert('a field is required');
// or do whatever you want with it..
}
}
}
答案 1 :(得分：0)
你需要在点击＆＃34; next＆＃34;时调用验证功能。在你进入下一步之前。我提供了一个小提琴，你可以看到我的意思： Fiddle
更新小提琴（验证单选按钮并选择）： Fiddle
$(".next").click(function(){
current_fs = $(this).parent();
if( validateFieldset(current_fs.attr('id')) ) //function to validate this step
{
....
}
});
在此功能中，您将浏览所有必需的输入字段并进行检查。在这个简单的例子中，我只检查它是否有值：
function validateFieldset(fieldset){
valid = false;
$.each($('#'+fieldset+' input'),function(){ //go through all inputs
//if an input field is required, but empty...add error class
if($(this).prop('required') && $(this).val().length == 0){
$(this).addClass("error");
}else{
$(this).removeClass("error");
}
});
if($('.error').length == 0) //if no error class --> valid
{
valid = true;
}
return valid;
}
最后，您可以添加一些CSS来突出显示您的错误类：
.error {
border: solid 2px #FF0000 !important;
}
希望这是你正在寻找的。 ：）