ユーザー名フィールドが空白の場合、jQueryを使用してエラーテキストを表示しようとしています。私はすでにこれを行っているので、これは問題ではありません。問題は、エラーテキストが表示された後、ユーザー名フィールドをクリックしてエラーテキストdivを非表示にしたいので、jQueryを使用してフィールドがまだ空白の場合にエラーを再表示できるようにすることです。
jQueryを使用してCSSで可視性を非表示に設定すると、display: hiddenGoogleChromeのインスペクターでコードを見るときに自動的にが追加されます。
コードは次のとおりです：http：//albsocial.net84.net/
<?php include ("php/head.php"); ?>
<div id="wrapper">
<div id="container">
<div id="intro">
<h2><center>Are you a member? Login ...</center></h2>
<h3><center>And enjoy hundreds of services.</center></h3>
<div id="log_form">
<form action="php/login.php" method="post" class="login_form">
<input type="text" size="25" name="log_uname"
id="login_txt" placeholder="Your Username">
<input type="password" size="25" name="log_password" id="login_pass" placeholder="Your Password">
<label id="check"><input type="checkbox" name="checkbox"> Remember Me</label>
<input type="submit" name="submit1" id="login_sub" value="LogIn">
<img id="loading1" src="images/ajax-loader.gif" alt="working.." />
<script>
$('#login_txt').click(function (e) {
e.preventDefault();
$('#error1').fadeOut('fast', function () {
$(this).css("visibility","hidden");
});
});
</script>
</form>
<div id="error1"></div>
</div>
<div id="new_users">
<h4 class="h4_users">New Users ...</h4>
<a href="#"><img src="#" width="55" height="55"></a>
<a href="#"><img src="#" width="55" height="55"></a>
<a href="#"><img src="#" width="55" height="55"></a>
<a href="#"><img src="#" width="55" height="55"></a>
</div>
</div>
<div id="register">
<h2><center>Sign up Below ...</center></h2>
<h3><center>Easy, fast and free!</center></h3>
<form action="php/register.php" method="post" name="form" class="form">
<input type="text" size="25" name="fname" placeholder="First Name">
<input type="text" size="25" name="lname" placeholder="Last Name">
<input type="text" size="25" name="username" placeholder="Username">
<input type="text" size="25" name="email" placeholder="Email">
<input type="text" size="25" name="email2" placeholder="Repeat Email">
<input type="password" size="25" name="password" placeholder="Password">
<input type="password" size="25" name="password2" placeholder="Repeat Password">
<input type="submit" name="submit" id="sub" value="Sign Up!">
<img id="loading" src="images/ajax-loader.gif" alt="working.." />
</form>
<div id="error"></div>
</div>
</div>
<?php include("php/footer.php"); ?>
エラーコードを実際に表示または作成するために使用するコード
$(document).ready(function(){
$('.form').submit(function(e) {
register();
e.preventDefault();
});
$('.login_form').submit(function(e) {
login();
e.preventDefault();
});
});
function register(){
hideshow('loading',1);
error(0);
$.ajax({
type: "POST",
url: "php/register.php",
data: $('.form').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg.status)==1){
window.location=msg.txt;
} else if(parseInt(msg.status)==0) {
error(1,msg.txt);
}
hideshow('loading',0);
}
});
}
function login(){
hideshow1('loading1',1);
error1(0);
$.ajax({
type: "POST",
url: "php/login.php",
data: $('.login_form').serialize(),
dataType: "json",
success: function(msg1){
if(parseInt(msg1.status1)==1){
window.location=msg1.txt1;
} else if (parseInt(msg1.status1) == 0) {
error1(1,msg1.txt1);
}
hideshow1('loading1',0)
}
});
}
function hideshow(el,act){
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error(act,txt){
hideshow('error',act);
if(txt) $('#error').html(txt);
}
function hideshow1(el,act){
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error1(act,txt1){
hideshow1('error1',act);
if(txt1) $('#error1').html(txt1);
}