[英]How can I get my error messages to display only if username or password is not entered correctly using 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>
大家好，
我創建了一個網頁，允許我在網頁上輸入用戶名和密碼（上部內容），但是我遇到的問題是，僅當用戶名不正確或密碼為時，如何才能顯示跨度錯誤消息不對嗎 現在，即使未輸入密碼或密碼不正確，它也會使屏幕上的兩個文本框動起來。 反之亦然，當用戶名不正確或未輸入時。 我該如何解決這個問題？ 我是否需要對if語句進行更嚴格的限制？ 這是我的代碼。
您可以在讀取每個字段時動態填充錯誤，並設置一個變量來跟蹤是否存在任何錯誤。 如果沒有錯誤，請提交提交表單時執行所需操作的代碼。
$("#button1").on("click", function() { var error = 0, usernameError = document.getElementById("username_error1"), 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) { console.log('form is ok'); $("#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%" }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>
$("#button1").on("click", function() { var error = 0; usernameError = document.getElementById("username_error1"); 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) { console.log('form is ok'); $("#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%" }); } });
如何修復此錯誤以及如何正確編寫 github 用戶名？ 是有美元符號還是沒有？
[英]How can I fix this error and how do I write my github username correctly? is it with a dollar sign or without?
如何使輸入用戶名字段的文本復制到密碼字段，使它們相同？
[英]How can I make the text entered into the username field copy to the password field so they are the same?
如何在我的 html 表單頂部顯示錯誤消息和確認消息？
[英]How can I display error messages and confirmation messages on top of my html forms?
如何不使用POST或GET輸入用戶名和密碼輸出到MySQL服務器
[英]How Can I Enter Username And Password Outputs To A MySQL Server Without Using POST or GET
如何使用MYSQL信息使報價正確顯示在PHP中，並將其放在onclick事件中？
[英]How can I get my quotes to display correctly in PHP using MYSQL information and put them inside an onclick event?
如何在bootstrap中使用輸入類型=密碼的工具提示顯示輸入的密碼？
[英]How can I show entered password using tooltip on input type=password in bootstrap?
我們如何使用jquery / javascript插件在文本框下方顯示錯誤消息？
[英]How can we display error messages below textbox using jquery/javascript plugin?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.