How can I get my error messages to display only if username or password is not entered correctly using jquery?

Question

 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>

Hello Everyone,

I have created a webpage that allows me to enter username and password on my webpage (upper content), but the problem I am having is how can I get it to display the span error message only if the username is incorrect or if the password is incorrect? Right now, it will animate both textboxes off the screen even if password is not entered or not correct. And vice versa, when the username isn't correct or not entered. How can I fix this problem? Do I need to make my if statements more restricted? Here is my code.

Answer 1

You can populate your error on the fly as each field is read, and set a variable that keeps track of whether there are any errors. If there are no errors, run the code that does whatever you want when the form is submitted.

 $("#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>

Answer 2

 $("#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%" }); } });

How can I get my error messages to display only if username or password is not entered correctly using jquery?

Question

2 answers

solution1
1 ACCPTED 2017-05-07 19:31:32

solution2
0 2017-05-07 20:48:23

How can I get my error messages to display only if username or password is not entered correctly using jquery?

Question

2 answers

solution1 1 ACCPTED 2017-05-07 19:31:32

solution2 0 2017-05-07 20:48:23

solution1
1 ACCPTED 2017-05-07 19:31:32

solution2
0 2017-05-07 20:48:23