I want to show error messages using jquery only when the username or password is entered incorrectly. How can this be achieved?

document.getElementById("buttonClick").addEventListener("click", mouseOverClick);

function mouseOverClick(){

   document.getElementById("buttonClick").style.color = "blue";

}

$("#buttonClick").hover(function() {
    $(this).css('cursor','pointer');
}); 
.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;       
}

#buttonClick{ 
     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="buttonClick">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 designed a new feature on my webpage that changes the color of a button when clicked, but I'm facing an issue with displaying error messages only when the username or password is incorrect. How can I make the error message appear based on the input validation? Here's the code snippet for reference.

Answer №1

To dynamically display errors as each field is checked, you can maintain a variable to track if there are any errors. If no errors are found, you can proceed with the form submission code.

$("#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 a valid existing username";
    error = 1;
  } else {
    usernameError.innerHTML = '';
  }
  if ($(".existingPassword").get(0).value != "honor433") {
    passwordError.innerHTML = "Please enter a valid existing password";
    error = 1;
  } else {
    passwordError.innerHTML = '';
  }
  if (error == 0) {
    console.log('form is okay');
    $("#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%" });
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I create a jQuery Listener for 2 different events simultaneously?

One issue I am facing is triggering a function when an event occurs in a table cell or when an item is selected from a dropdown menu. Currently, I have code that works for the table cell event: $('td[id^="tblcell"]').click(function() { ... ... d ...

checkbox-activated navigation bar

Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it. Here is the code snippet: <div class="leftside"> <input typ ...

Error: The JavaScript SRC cheat is malfunctioning

Having an issue with the code below. The 'dummy1' and 'dummy2' variables are not loading their content as expected on the page. Any suggestions? <html> <head> <title>JavaScript On-line Test</title> <script LA ...

Enter a value into the box by clicking a button that retrieves information from a text file

Below is a box where information needs to be filled: https://i.sstatic.net/wkFEv.png The code used to create the box above is as follows: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> < ...

I am looking to incorporate a password recovery page into my login process, but I am facing difficulty navigating to it once the code has been modified

I'm looking to include a forgotten password option on my login page, but I'm facing an issue when trying to navigate to it after updating the code. The website is throwing the following error message: [vue-router] uncaught error during rout ...

Can I use JavaScript to generate an element similar to <ion-icon name="heart"></ion-icon>?

Currently, I am utilizing a website called to incorporate icons into my buttons. It is quite straightforward with HTML when introducing a new element containing the icon. All you need to do is define a button and insert this code within it: ion-icon name= ...

Having difficulty accurately interpreting the input value

As someone new to JavaScript, I set out to create a basic calculator using JavaScript and HTML. My goal is to have two input fields, named Fld1 and Fld2, that would add up the values entered into them when submitting. However, despite parsing the input val ...

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

Alignment of badge-pill and h2 in a horizontal position

I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...

Transfer the script from package.json to an npm package

In each of our plugins' root directories, there is a file named tools.js. This file contains a build function that assists in creating builds for the plugin. The package.json file references it like this: "scripts": { "build:node&qu ...

The navigation bar seems to be missing in action

I am currently working on a project on Codepen, and I am trying to create a navbar with a dark background color and my name in a light color. However, I am facing issues as it is not displaying as expected. I followed the Bootstrap 4.0 guide available onli ...

Showing a PDF from a shared folder on a network using AJAX in HTML5

I'm facing a challenge with displaying a PDF on the web. The layout includes a dropdown menu on the left with various PDF file names, and upon selection, the chosen PDF should be displayed on the right using an ajax call. Since my PDFs are stored in a ...

Show or hide the legend on a highchart dynamically

I am currently utilizing highchart in my application and I am interested in learning how to toggle the visibility of the legend within the highchart. Here is what I have attempted: var options = { chart: { type: 'column&a ...

choose the li element that is located at the n-th position within

Need help with HTML code <div class="dotstyle"> <ul> <li class="current"><a href="javascript:void(0)"></a></li> <li><a href="javascript:void(0)"></a></li> <li><a href="javasc ...

Links are unable to function properly outside of the carousel slideshow in Chrome

www.encyclopediasindhiana.org/index2.php I successfully implemented a slideshow using mycarousel with the help of PHP. However, I am facing an issue where the hyperlinks on the left side of the carousel are not working if the image is as large as the heig ...

Retrieve the input name array key value using jQuery from the adjacent TD

It's a tough one to summarize in the title, but here is the code snippet that explains it: <tr class=""> <td> <input value="9" name="set[122][order]"></input> <input class="set-id ...

Pause the ajax response using jQuery

I encountered a simple issue that is causing me trouble. It seems that when I send an ajax request, there isn't enough time to assign the value to the combonews variable: jQuery.ajax({ type: "POST", url: "People.aspx/LoadCombo ...

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

Is there a method to control the number of characters per line in a textarea? For example, on lines 1-3 of the textarea, only 20 characters can be entered, while on subsequent lines, up to 50 characters are allowed. The current structure of the textarea l ...

Using Angular, implementing conditional statements within a for loop

I am currently working on a project where I have an array being looped inside a tag, using the target="_blank" attribute. The issue is that one of the elements in the array should not have this target="_blank" attribute. What would be the best course of ...

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...