我的代码在 IE7 中有效,但在需要对象时出现错误,并且在 chrome 和 firefox 中无效。请帮我。下面是我的代码 IE7 浏览器从 jquery 函数的开始显示错误,但我能够继续。但是在 chrome 和 safari 中,提交按钮和 Validate() 函数不起作用。
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
Cufon.replace('h3',{ textShadow: '1px 1px #000'});
Cufon.replace('.back');
</script>
<script type="text/javascript">
function validate(){
var Uname=document.getElementById("username")
if(Uname.value==""||Uname.value==null){
alert("Enter Your User Name")
Uname.focus()
return false
}
if(Uname.value.length<6){
alert("Min-6 characters for your UserName")
Uname.focus()
return false
}
var pass=document.getElementById("password")
if(pass.value==""||pass.value==null){
alert("Enter Your Password")
pass.focus()
return false
}
if(pass.value.length<6){
alert("Min-6 characters for your Password")
pass.focus()
return false
}
return true
}
</script>
</head>
<body>
<div class="wrapper">
<h1>User Management</h1>
<div class="content">
<div id="form_wrapper" class="form_wrapper">
<form class="login active" onSubmit="return validate() action="login.php" method="post">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" id="username"/>
<span class="error">enter ur email id</span>
</div>
<div>
<label>Password: </label>
<input type="password" id="password"/><a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a>
</div>
<div class="bottom">
<input type="submit" value="Login"></input>
<div class="clear"></div>
</div>
</form>
<form class="forgot_password" onSubmit="return validate() action="forgotpassword.php" method="post">
<h3>Forgot Password</h3>
<div>
<label>Username</label>
<input type="text" />
<span class="error">enter ur email id</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"></input>
<a href="index.php" rel="login" class="linkform">Suddenly remebered? Log in here</a>
<div class="clear"></div>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
</body>