0
jqueryを使用してユーザー名またはパスワードが正しく入力されていない場合のみ、エラーメッセージが表示されるようにするにはどうすればよいですか？
document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
$(document).ready(function(){
$('#button1').on('click', function() {
if($(".existingUsername").get(0).value == "S0104675" && $(".existingPassword").get(0).value == "honor433")
{
$('#para1').animate({'left': '-100%'});
$('.username-label').animate({'left': '-105%'});
$('.existingUsername').animate({'left': '-105%'});
$('.password-label').animate({'left': '-105%'});
$('.existingPassword').animate({'left': '-105%'});
$('#button1').animate({'left': '-105%'});
}else{
document.getElementById("username_error1").innerHTML= "Please enter an existing valid username";
document.getElementById("password_error2").innerHTML= "Please enter an existing valid password";
}
});
});
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 350px;
position: relative;
top: -70px;
}
.existingUsername,
.existingPassword,
#username_error1,
#password_error2
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 425px;
position: relative;
top: -70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 20px;
}
span{
color: red;
margin-left: 300px;
}<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text" value="">
<br/><br/>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password" value="">
<br/><br/>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email" value="" >
<br/><br/>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email" value="">
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>みなさん、こんにちは、
私は私のウェブページ（上のコンテンツ）にユーザー名とパスワードを入力することを可能にするWebページを作成しましたが、私が午前問題は、私は得ることができる方法でありますユーザー名が間違っているか、パスワードが間違っている場合にのみスパン・エラー・メッセージを表示しますか？今は、パスワードが入力されていないか正しくない場合でも、両方のテキストボックスを画面の外にアニメーション表示します。ユーザー名が正しくないか、入力されていない場合はその逆です。この問題を解決するにはどうすればよいですか？ if文をより制限する必要がありますか？ここに私のコードです。
なぜあなたが開始するために画面の外のエラー要素を配置していますか？単にコンテンツを正しい位置に置いて、エラーを表示したいときに単に表示/非表示にするのはなぜですか？ それ以外は、if文はより具体的である必要があります。パスワードとユーザー名の両方をカバーするif文を1つ持つことはできません。また、1つの要素を正しくアニメーション化することを期待しています。あなたがより正確であれば、それはより簡単になります。 – LouisK
@LouisK私はあなたが私が言っていることを誤解していたに違いないと思います。おそらく私はそれを十分に明確にしていないでしょう。私は画面からエラーメッセージをアニメーション化していません。私はまだ新しいコンテンツを作成していない。あなたは私の実際の問題で私を助けることができると思いますか？ – User445555
あなたの質問は次のとおりです。ユーザー名が無効な場合はユーザー名ボックスのみをアニメートし、パスワードが無効の場合はパスワードボックスのみをアニメーション化しますか？ – LouisK