-1
我刚刚开始在jee和im当前正在开发一个web应用程序。我有连续的形式，最终生成一个文件。我的问题是，我想添加一个十字，表明每个表单中都有一个错误，或者是一个显示相反的检查，以便在表单未完成时不允许生成文件。这里是我的它的代码源有利于问题的描述，如果有任何误解
感谢您的答复添加交叉错误并检查验证
$(function() {
\t /*
\t number of fieldsets
\t */
\t var fieldsetCount = $('#createbank').children().length;
\t
\t /*
\t current position of fieldset/navigation link
\t */
\t var current \t = 1;
\t /*
\t sum and save the widths of each one of the fieldsets
\t set the final sum as the total width of the steps element
\t */
\t var stepsWidth \t = 0;
var widths \t \t = new Array();
\t $('#steps .step').each(function(i){
var $step \t \t = $(this);
\t \t widths[i] \t \t = stepsWidth;
stepsWidth \t \t += $step.width();
});
\t $('#steps').width(stepsWidth);
\t
\t /*
\t to avoid problems in IE, focus the first input of the form
\t */
\t $('#createbank').children(':first').find(':input:first').focus(); \t
\t
\t /*
\t show the navigation bar
\t */
\t $('#navigation').show();
\t
\t /*
\t when clicking on a navigation link
\t the form slides to the corresponding fieldset
\t */
$('#navigation a').bind('click',function(e){
\t \t var $this \t = $(this);
\t \t var prev \t = current;
\t \t $this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
\t \t /*
\t \t we store the position of the link
\t \t in the current variable \t
\t \t */
\t \t current = $this.parent().index() + 1;
\t \t /*
\t \t animate/slide to the next or to the corresponding
\t \t fieldset. The order of the links in the navigation
\t \t is the order of the fieldsets.
\t \t Also, after sliding, we trigger the focus on the first
\t \t input element of the new fieldset
\t \t If we clicked on the last link (confirmation), then we validate
\t \t all the fieldsets, otherwise we validate the previous one
\t \t before the form slided
\t \t */
$('#steps').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
\t \t \t if(current == fieldsetCount)
\t \t \t \t validateSteps();
\t \t \t else
\t \t \t \t validateStep(prev);
\t \t \t $('#createbank').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus(); \t
\t \t });
e.preventDefault();
});
\t
\t /*
\t clicking on the tab (on the last input of each fieldset), makes the form
\t slide to the next step
\t */
\t $('#createbank > fieldset').each(function(){
\t \t var $fieldset = $(this);
\t \t $fieldset.children(':last').find(':input').keydown(function(e){
\t \t \t if (e.which == 9){
\t \t \t \t $('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
\t \t \t \t /* force the blur for validation */
\t \t \t \t $(this).blur();
\t \t \t \t e.preventDefault();
\t \t \t }
\t \t });
\t });
\t
\t /*
\t validates errors on all the fieldsets
\t records if the Form has errors in $('#createbank').data()
\t */
\t function validateSteps(){
\t \t var FormErrors = false;
\t \t for(var i = 1; i < fieldsetCount; ++i){
\t \t \t var error = validateStep(i);
\t \t \t if(error == -1)
\t \t \t \t FormErrors = true;
\t \t }
\t \t $('#createbank').data('errors',FormErrors); \t
\t }
\t
\t /*
\t validates one fieldset
\t and returns -1 if errors found, or 1 if not
\t */
\t function validateStep(step){
\t \t if(step == fieldsetCount) return;
\t \t
\t \t var error = 1;
\t \t var hasError = false;
\t \t $('#createbank').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
\t \t \t var $this \t \t = $(this);
\t \t \t var valueLength = jQuery.trim($this.val()).length;
\t \t \t
\t \t \t if(valueLength == ''){
\t \t \t \t hasError = true;
\t \t \t \t $this.css('background-color','#FFEDEF');
\t \t \t }
\t \t \t else
\t \t \t \t $this.css('background-color','#FFFFFF'); \t
\t \t });
\t \t var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
\t \t $link.parent().find('.error,.checked').remove();
\t \t
\t \t var valclass = 'checked';
\t \t if(hasError){
\t \t \t error = -1;
\t \t \t valclass = 'error';
\t \t }
\t \t $('<span class="'+valclass+'"></span>').insertAfter($link);
\t \t
\t \t return error;
\t }
\t $("#next").click(function() {
\t var v = $("#navigation ul li.selected");
\t var n = $(v).next("li").length;
\t if (n == 1){
\t v.removeClass("selected").next("li").find("a").trigger("click")
\t }
\t });
\t $("#prev").click(function() {
\t var v = $("#navigation ul li.selected");
\t var n = $(v).prev("li").length;
\t if (n == 1){
\t v.removeClass("selected").prev("li").find("a").trigger("click")
\t }
\t });
\t /*
\t if there are errors don't allow the user to submit
\t */
\t $('#registerButton').bind('click',function(){
\t \t if($('#createbank').data('errors')){
\t \t \t alert('Please correct the errors in the Form');
\t \t \t return false;
\t \t } \t
\t });
\t
\t $file = 'template_bank_modified.sql';
if (! file) {
die('file not found'); //Or do something
} else {
if(isset($_GET['file'])){
// Set headers
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Type: application/zip");
header("Content-Transfer-Encoding: binary");
// Read the file from disk
readfile($file); }
}
\t
});*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
margin:15px auto;
text-align:center;
width:600px;
position:relative;
height:100%;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
background-color:#f9f9f9;
width:600px;
overflow:hidden;
}
#steps{
width:600px;
\t /*height:320px;*/
overflow:hidden;
}
.step{
float:left;
width:600px;
\t /*height:320px;*/
}
#navigation{
height:45px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
\t float:left;
\t margin-left:22px;
}
#navigation ul li{
\t float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
\t margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.selected a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
span.checked{
background:transparent url(../images/checked.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
span.error{
background:transparent url(../images/error.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
#steps form fieldset{
border:none;
padding-bottom:20px;
}
#steps form legend{
text-align:left;
background-color:#f0f0f0;
color:#666;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:590px;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
#steps form p{
float:left;
clear:both;
margin:5px 0px;
background-color:#f4f4f4;
border:1px solid #fff;
width:400px;
padding:10px;
margin-left:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#steps form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#steps form p.submit{
background:none;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#steps form button {
\t border:none;
\t outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}
#steps form button:hover {
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords"
\t content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css"
\t media="screen" />
<script type="text/javascript"
\t src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript" >
</script>
</head>
<body>
\t <img class="left" src="img/hps.png" width="150" height="100" alt=""
\t \t title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
\t <h1>HPS REGISTER</h1>
\t <div id="wrapper">
\t \t <div id="steps">
\t \t \t
\t \t \t <form method="post" action="createbank">
\t \t \t \t <fieldset class="step">
\t \t \t \t \t <legend>Account</legend>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="clientname">Client name<span class="requis">*</span></label>
\t \t \t \t \t \t <input id="clientname" name="clientname" />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="email">Email</label> <input id="email" name="email"
\t \t \t \t \t \t \t placeholder="[email protected]" type="email" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="password">Password<span class="requis">*</span></label>
\t \t \t \t \t \t <input id="password" name="password" type="password"
\t \t \t \t \t \t \t AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t </fieldset>
\t \t \t \t <fieldset class="step">
\t \t \t \t \t <legend>Personal Details</legend>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="name">Full Name</label> <input id="name" name="name"
\t \t \t \t \t \t \t type="text" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="country">Country</label> <input id="country"
\t \t \t \t \t \t \t name="country" type="text" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="phone">Phone</label> <input id="phone" name="phone"
\t \t \t \t \t \t \t placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="website">Website</label> <input id="website"
\t \t \t \t \t \t \t name="website"
\t \t \t \t \t \t \t placeholder="e.g. http://www.hps.com
\t \t \t \t \t \t \t \t type="
\t \t \t \t \t \t \t AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t </fieldset>
\t \t \t \t <fieldset class="step">
\t \t \t \t \t <legend>client bank information</legend>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="banktag">Bank tag <span class="requis">*</span></label>
\t \t \t \t \t \t <input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="currency">Currency<span class="requis">*</span></label>
\t \t \t \t \t \t <input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="datesystem">Date system <span class="requis">*</span></label>
\t \t \t \t \t \t <input id="datesystem" name="datesystem" type="text"
\t \t \t \t \t \t \t AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="bankname">Bank name<span class="requis">*</span></label>
\t \t \t \t \t \t <input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <label for="schemaname">Schema name <span class="requis">*</span>
\t \t \t \t \t \t </label> <input id="schemaname" name="schemaname" type="text"
\t \t \t \t \t \t \t AUTOCOMPLETE=off />
\t \t \t \t \t </p>
\t \t \t \t </fieldset>
\t \t \t \t <fieldset class="step">
\t \t \t \t \t <legend>Confirm</legend>
\t \t \t \t \t <p>IF Everything in the form is correctly filled your
\t \t \t \t \t \t registration will be made . Otherwise an error message will be
\t \t \t \t \t \t generate .In this last step the user can confirm the submission of
\t \t \t \t \t \t the form.</p>
\t \t \t \t \t <p class="submit">
\t \t \t \t \t \t <button id="registerButton" type="submit">generate</button>
\t \t \t \t \t </p>
\t \t \t \t </fieldset>
\t \t \t \t </form>
\t \t </div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
\t \t <div id="navigation" style="display: none;">
\t \t \t <ul>
\t \t \t \t <li class="selected"><a href="#">Account</a></li>
\t \t \t \t <li><a href="#">Personal Details</a></li>
\t \t \t \t <li><a href="#">Bank information</a></li>
\t \t \t \t <li><a href="#">Confirm</a></li>
\t \t \t </ul>
\t \t </div>
\t </div>
</body></html>
我该怎么做，因为我以前试过，它没有工作 –