有没有办法在验证后应用淡入淡出效果。例如,用户将文本字段留空,然后我将返回“所有字段都需要!”的文本。
目前我有这个:
.successbox, .warningbox, .errormsgbox {
font-weight:bold;
border: 2px solid;
margin: 10px 0px;
padding:15px 10px 15px 70px;
background-repeat: no-repeat;
background-position: 10px center;
width:600px;
}
.errormsgbox {
color: #D8000C;
background-color:#FDD5CE;
background-image: url('../images/error.png');
}
我正在回复这样的错误:
<?php if($error) : ?>
<div class="errormsgbox" ><?php echo $error ?></div>
<?php endif ?>
我的js到现在就像:
$(".errormsgbox").fadeOut("slow");
答案 0 :(得分:2)
jQuery provdes a fadeOut
function你可以用来将东西淡入以太:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
如果您使用的是jQuery Validate,则可以使用highlight
(和unhighlight
)参数来应用此fadeOut
highlight: function (element, errorClass, validClass) {
$(element).fadeOut(5000);
}
在5秒内淡出。
答案 1 :(得分:2)
您希望什么时候您的错误消失并消失?或者你想让它淡入并出现?
在这种情况下,
$(function() {
$(".errormsgbox").fadeIn("slow");
});
在页面加载时淡出它不会给用户很多时间来查看错误。也许在用户获得即时反馈的AJAX请求中,但不是在页面重新加载之后。
答案 2 :(得分:1)
我希望您通过执行页面重新加载来显示错误消息,因为您通过PHP代码返回错误。在这种情况下,将您的JS代码放在$(document).ready()
中,它将为您完成工作。
答案 3 :(得分:1)
我总是使用JS和jQuery检查空白字段,格式错误的电子邮件等。我倾向于做很多ajax,所以我也在这些方面做了很多回调处理。以下是处理ajax表单错误的示例:
function FieldValidation()
{
//selectors may vary!
this.whateverFields = {
user: $( '#user_field' ),
email: $( '#email_field' )
}
this.whateverForm = function()
{
var wF = this;
$( '#form' ).submit( function( e ){
e.preventDefault();
wF.resetWhateverForm();
//cache just in case you want to check against multiple error types
var user_val = wF.whateverFields.user.val();
var email_val = wF.whateverFields.email.val();
var error_array = [];
var n = 0;
if( user_val === '' ){ error_array[ n ] = 'user_error'; n++; }
if( email_val === '' ){ error_array[ n ] = 'email_error'; n++; }
if( n > 0 )
{
var len = error_array.length;
for( var i = 0; i < len; i++ )
{
switch( error_array[ i ] )
{
case 'user_error':
wF.whateverFields.user.addClass( 'error' ).next().fadeIn( 'fast' );
break;
case 'email_error':
wF.whateverFields.email.addClass( 'error' ).next().fadeIn( 'fast' );
break;
default:
return false;
}
}
return false;
}
//do ajax now...
});
}
this.resetWhateverForm()
{
for( var key in this.whateverFields )
{
if( this.whateverFields.hasOwnProperty( key ) )
{
this.whateverFields[key].removeClass( 'error' ).next().hide();
}
}
}
//pop any load-ready methods in here
this.intialize = function()
{
this.whateverForm();
}
this.intialize();
}
$( document ).ready(function(){
var fv = new FieldValidation();
});
以下是一些标记的示例:
<form id='form'>
<input id='user_field' name='user_field' type='text' />
<span class='rqd_txt'>You must fill out this field.</span>
<input id='email_field' name='email_field' type='text' />
<span class='rqd_txt'>You must fill out this field.</span>
<button type='submit' id='whatever'></button>
</form>
一些css:
.error{ border: 1px solid red; }