0
スパンidタグ内のエラーメッセージを出力するために検証機能を使用できますか？
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');
});
$('#button1').on('click', function() {
var error = 0;
var usernameError = document.getElementById("username_error1");
var passwordError = document.getElementById("password_error2");
if ($(".existingUsername").get(0).value != "S0104675") {
usernameError.innerHTML = "Please enter an existing valid username";
error = 1;
} else {
usernameError.innerHTML = '';
}
if ($(".existingPassword").get(0).value != "honor433") {
passwordError.innerHTML = "Please enter an existing valid password";
error = 1;
} else {
passwordError.innerHTML = '';
}
if(error == 0)
{
$("#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%" });
}
});
$('#button2').validate(function() {
var rules= {
newUsername: {
required: true,
minlength: 6
},
newPassword: {
required: true,
minlength: 6
},
newEmail:{
regex: "/^[A-Za-z0-9_]+ @[A-Za-z0-9]+ [A-Za-z0-9]"
},
repeatEmail: {
".newEmail"
},
},
var messages= {
newUsername: "Username must be at least 6 characters",
newPassword: "Password must be at least 6 characters",
newEmail: "Email must be a value and contain "@" "
repeatEmail: {
required: "Email must match EmailAddress",
required: "Email must have a value",
},
}
});.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;
position: relative;
}
#para2 {
padding: 0px 1099px 0px 20px;
position: relative;
}
.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 330px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 40px;
}
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"/><span id="New_Username_error"></span>
<span id="New_Username_error2"></span><br><br>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password"/ ><span id="New_Password_error"></span><br><br>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email" /><br><span id="New_Email_error"></span><br>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email"/>
<br><span id="NewReenter_Email_error"></span>
<span id="NewReenter_Email_error2"></span>
<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>みなさん、こんにちは、
は、私は私の現在のスパンIDの各内の出力異なるエラーメッセージに順番に私の検証機能を使用します。どうすればいいのですか？これを行うことができれば、これを達成するために他に何が必要ですか？上記の私のコードです。
以内にあなたのコードをラップし、エラーがある：「キャッチされないでSyntaxError：予期しないトークン：」 – shaochuancs
@shaochuancsは、あなたが私を助けることができるあなたと思いますか？私がやりたいことをやるための簡単な方法はありますか？ – User445555
構文エラーを修正し、縮小された、完全で検証可能なコードスニペットを提供できますか？ – shaochuancs