0
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() {
$(".login").validate({
rules: {
existingUsername: {
required: true,
minlength: 10
},
existingPassword:{
required: true,
minlength: 10
},
messages: {
existingUsername: {
required: "You must enter a valid existing user account",
minlength: "Your username must be at least 10 characters long"
},
existingPassword: {
required: "You must enter a valid password associated with an account",
minlength: "Your username must be at least 10 characters long"
}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 300px;
position: relative;
top: -70px;
}
.existing1-username-input-textbox,
.existing2-password-input-textbox
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 390px;
position: relative;
top: -50px;
-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;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
position: relative;
top: -70px;
margin-left: 20px;
}
span{
color: red;
}<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" value="">
<span id="username_error1">*</span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password" value="">
<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>如何可以驗證每個的使用AJAX，以查看是否用戶名和密碼是否正確（上部文本框），如果它們是不正確的，在紅色顯示每個相應的文本框下面的錯誤消息。這是我的代碼。任何建議都會有幫助。我知道我可以使用$ .ajax（）方法，但我不知道如何將當前驗證函數轉換爲明智的ajax方法。
@charlietfl的AJAX表單驗證下面不顯示怎麼辦通過AJAX方法驗證。 – User445555
許多他們做...尋找一個插件/腳本，是有據可查的，有你想要 – charlietfl
@ charlietfl我如何可以驗證功能，而不會顯示正確的用戶名和密碼？ – User445555