The JQuery script is unable to properly verify password confirmation

<html>
<head>
<title>Register</title>
<style>
.content{
position: relative;
top: 130px;
border:3px solid black;
padding: 50px;
width:300px;
margin: auto auto 200px auto;
align: center;
}

body{
background-image: url(Register.jpg);
background-size: cover;
}
.s1{
float:left;
}
.s2{
float:right;
}
.s3 {
margin-left: 110px;
}
.s4{
margin-left: 90px;
}
.s4 a{
color: black;
font-size: 12;
}
.s4 a:hover{
color: blue;
}
p{
font-size: 12;
color: red;
}
.d1{
margin-left:
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#pass , #pass1").on("keyup", function () {
  if ($("#pass").val() == $("#pass").val()) {
    $("#pass1").css("border", "3px solid green");
  } else 
    $("#pass1").css("border", "3px solid red");
});
</script>
</head>
<body>
<jsp:include page="header.html"/>
<div class="container">
<div class="content">
<form class="page" method="post" action="RegisterPage" name="register">
<span class="s1">
First Name
</span>
<span class="s2">
<input name="firstname" placeholder="Firstname" id="firstname" required>
</span>
<br><br>
<span class="s1">
Last Name
</span>
<span class="s2">
<input name="lastname" placeholder="Lastname" id="lastname" required>
</span>
<br><br>
<span class="s1">
Date of Birth
</span>
<span class="s2">
<input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
</span>
<br><br>
<span class="s1">
Gender
</span>
<span class="s2">
<input id = "input2" type="radio" name="gen" value="Male" required>Male 
<input id = "input2" type="radio" name="gen" value="Female">Female 
</span>
<br><br>
<span class="s1">
Membership Type
</span>
<span class="s2">
<input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
<input id = "input2" type="radio" name="mem" value="Member">Member
</span>
<br><br>
<span class="s1">
Address
</span>
<span class="s2">
<input name="addr" placeholder="Address First Line" id="addr" required>
</span>
<br><br>
<span class="s1">
Contact Number
</span>
<span class="s2">
<input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
</span>
<br><br>
<span class="s1">
Email ID
</span>
<span class="s2">
<input name="loginID" type="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8f8c8dae8a8b88c08d8183">[email protected]</a>" id="loginID" required>
</span>
<br><br>
<span class="s1">
Username
</span>
<span class="s2">
<input name="username" placeholder="Username" id="username" required>
</span>
<br><br>
<span class="s1">
Password
</span>
<span class="s2">
<input name="password" type = "password" placeholder="Password" id="pass" required>
</span>
<br><br>
<span class="s1">
Confirm Password
</span>
<span class="s2">
<input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
</span>
<br>
<div class="d1"><p>${error}</p></div>
<br><br>
<span class="s3"><input type="submit" value="Register" onClick="check()"></span>
<br><br>
<span class="s4">
<a href="Login.jsp">Already a user!! Login</a>
</span>
</form>
</div>
</div>
<jsp:include page="footer.html"/>
</body>
</html>

Having issues with the code functionality as intended. Green border should appear when passwords match, but it's not working correctly in Eclipse IDE. Seeking assistance to resolve this problem and looking into whether different IDs impact jQuery statements.

javascriptjqueryhtmlcss

Answer №1

error message :

if ($("#pass").val() == $("#pass").val()) {
                               ^---------------------

Correction:

if ($("#pass").val() == $("#pass1").val()) {
                               ^---------------------


$(document).ready(function(){
  $("#pass , #pass1").on("keyup", function () {
    if ($("#pass").val() == $("#pass1").val()) {
      $("#pass1").css("border", "3px solid green");
    }
    else 
      $("#pass1").css("border", "3px solid red");
  });
}) 
.content{
position: relative;
top: 130px;
border:3px solid black;
padding: 50px;
width:300px;
margin: auto auto 200px auto;
align: center;
}

body{
background-image: url(Register.jpg);
background-size: cover;
}
.s1{
float:left;
}
.s2{
float:right;
}
.s3 {
margin-left: 110px;
}
.s4{
margin-left: 90px;
}
.s4 a{
color: black;
font-size: 12;
}
.s4 a:hover{
color: blue;
}
p{
font-size: 12;
color: red;
}
.d1{
margin-left:
}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<jsp:include page="header.html"/>
  <div class="container">
    <div class="content">
      <form class="page" method="post" action="RegisterPage" name="register">
        <span class="s1">
          First Name
        </span>
        <span class="s2">
          <input name="firstname" placeholder="Firstname" id="firstname" required>
        </span>
        <br><br>
        <span class="s1">
          Last Name
        </span>
        <span class="s2">
          <input name="lastname" placeholder="Lastname" id="lastname" required>
        </span>
        <br><br>
        <span class="s1">
          Date of Birth
        </span>
        <span class="s2">
          <input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
        </span>
        <br><br>
        <span class="s1">
          Gender
        </span>
        <span class="s2">
          <input id = "input2" type="radio" name="gen" value="Male" required>Male 
          <input id = "input2" type="radio" name="gen" value="Female">Female 
        </span>
        <br><br>
        <span class="s1">
          Membership Type
        </span>
        <span class="s2">
          <input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
          <input id = "input2" type="radio" name="mem" value="Member">Member
        </span>
        <br><br>
        <span class="s1">
          Address
        </span>
        <span class="s2">
          <input name="addr" placeholder="Address First Line" id="addr" required>
        </span>
        <br><br>
        <span class="s1">
          Contact Number
        </span>
        <span class="s2">
          <input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
        </span>
        <br><br>
        <span class="s1">
          Email ID
        </span>
        <span class="s2">
          <input name="loginID" type="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2e2d2c0f2b2a29612c2022">[email protected]</a>" id="loginID" required>
        </span>
        <br><br>
        <span class="s1">
          Username


        
        ...

Alternatively, you can also use the input event like this:

$(document).ready(function(){
  $("#pass , #pass1").on("input", function () {
    if ($("#pass").val() == $("#pass1").val()) {
      $("#pass1").css("border", "3px solid green");
    }
    else 
      $("#pass1").css("border", "3px solid red");
  });
})


$(document).ready(function(){
  $("#pass , #pass1").on("input", function () {
    if ($("#pass").val() == $("#pass1").val()) {
      $("#pass1").css("border", "3px solid green");
    }
    else 
      $("#pass1").css("border", "3px solid red");
  });
})
.content {
  position: relative;


  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<jsp:include page="header.html"/>

...

Answer №2

It appears that you are comparing the Password and Confirm Password fields. The correct approach would be:

if ($("#pass").val() == $("#pass1").val())

Answer №3

Here is the latest version of your code: 

$("#pass,#pass1").on("keyup", function() {
  if ($("#pass").val() == $("#pass1").val())
    $("#pass1").css("border", "3px solid green");
  else
    $("#pass1").css("border", "3px solid red");
});
.content {
  position: relative;
  top: 130px;
  border: 3px solid black;
  padding: 50px;
  width: 300px;
  margin: auto auto 200px auto;
  align: center;
}

body {
  background-image: url(Register.jpg);
  background-size: cover;
}

.s1 {
  float: left;
}

.s2 {
  float: right;
}

.s3 {
  margin-left: 110px;
}

.s4 {
  margin-left: 90px;
}

.s4 a {
  color: black;
  font-size: 12;
}

.s4 a:hover {
  color: blue;
}

p {
  font-size: 12;
  color: red;
}

.d1 {
  margin-left:
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    <form class="page" method="post" action="RegisterPage" name="register">
      <span class="s1">
First Name
</span>
      <span class="s2">
<input name="firstname" placeholder="Firstname" id="firstname" required>
</span>
      <br><br>
      <span class="s1">
Last Name
</span>
      <span class="s2">
<input name="lastname" placeholder="Lastname" id="lastname" required>
</span>
      <br><br>
      <span class="s1">
Date of Birth
</span>
      <span class="s2">
<input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
</span>
      <br><br>
      <span class="s1">
Gender
</span>
      <span class="s2">
<input id = "input2" type="radio" name="gen" value="Male" required>Male 
<input id = "input2" type="radio" name="gen" value="Female">Female 
</span>
      <br><br>
      <span class="s1">
Membership Type
</span>
      <span class="s2">
<input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
<input id = "input2" type="radio" name="mem" value="Member">Member
</span>
      <br><br>
      <span class="s1">
Address
</span>
      <span class="s2">
<input name="addr" placeholder="Address First Line" id="addr" required>
</span>
      <br><br>
      <span class="s1">
Contact Number
</span>
      <span class="s2">
<input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
</span>
      <br><br>
      <span class="s1">
Email ID
</span>
      <span class="s2">
<input name="loginID" type="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09686b6a496d6c6f276a6664">[email protected]</a>" id="loginID" required>
</span>
      <br><br>
      <span class="s1">
Username
</span>
      <span class="s2">
<input name="username" placeholder="Username" id="username" required>
</span>
      <br><br>
      <span class="s1">
Password
</span>
      <span class="s2">
<input name="password" type = "password" placeholder="Password" id="pass" required>
</span>
      <br><br>
      <span class="s1">
Confirm Password
</span>
      <span class="s2">
<input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
</span>
      <br>
      <div class="d1">
        <p>${error}</p>
      </div>
      <br><br>
      <span class="s3"><input type="submit" value="Register" onClick="check()"></span>
      <br><br>
      <span class="s4">
<a href="Login.jsp">Already a user!! Login</a>
</span>
    </form>
  </div>
</div>

Answer №4

try this one:

$("#pass , #pass1").on("input", function () {

  if ($("#pass").val() == $("#pass1").val()) {
    $("#pass1").css("border", "3px solid green");
  } else 
    $("#pass1").css("border", "3px solid red");
});
.content{
position: relative;
top: 130px;
border:3px solid black;
padding: 50px;
width:300px;
margin: auto auto 200px auto;
align: center;
}

body{
background-image: url(Register.jpg);
background-size: cover;
}
.s1{
float:left;
}
.s2{
float:right;
}
.s3 {
margin-left: 110px;
}
.s4{
margin-left: 90px;
}
.s4 a{
color: black;
font-size: 12;
}
.s4 a:hover{
color: blue;
}
p{
font-size: 12;
color: red;
}
.d1{
margin-left:
}
<html>
<head>
<title>Register</title>
<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
<jsp:include page="header.html"/>
<div class="container">
<div class="content">
<form class="page" method="post" action="RegisterPage" name="register">
<span class="s1">
First Name
</span>
<span class="s2">
<input name="firstname" placeholder="Firstname" id="firstname" required>
</span>
<br><br>
<span class="s1">
Last Name
</span>
<span class="s2">
<input name="lastname" placeholder="Lastname" id="lastname" required>
</span>
<br><br>
<span class="s1">
Date of Birth
</span>
<span class="s2">
<input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
</span>
<br><br>
<span class="s1">
Gender
</span>
<span class="s2">
<input id = "input2" type="radio" name="gen" value="Male" required>Male 
<input id = "input2" type="radio" name="gen" value="Female">Female 
</span>
<br><br>
<span class="s1">
Membership Type
</span>
<span class="s2">
<input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
<input id = "input2" type="radio" name="mem" value="Member">Member
</span>
<br><br>
<span class="s1">
Address
</span>
<span class="s2">
<input name="addr" placeholder="Address First Line" id="addr" required>
</span>
<br><br>
<span class="s1">
Contact Number
</span>
<span class="s2">
<input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
</span>
<br><br>
<span class="s1">
Email ID
</span>
<span class="s2">
<input name="loginID" type="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a5a6a784a0a1a2eaa7aba9">[email protected]</a>" id="loginID" required>
</span>
<br><br>
<span class="s1">
Username
</span>
<span class="s2">
<input name="username" placeholder="Username" id="username" required>
</span>
<br><br>
<span class="s1">
Password
</span>
<span class="s2">
<input name="password" type = "password" placeholder="Password" id="pass" required>
</span>
<br><br>
<span class="s1">
Confirm Password
</span>
<span class="s2">
<input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
</span>
<br>
<div class="d1"><p>${error}</p></div>
<br><br>
<span class="s3"><input type="submit" value="Register" onClick="check()"></span>
<br><br>
<span class="s4">
<a href="Login.jsp">Already a user!! Login</a>
</span>
</form>
</div>
</div>
<jsp:include page="footer.html"/>
</body>
</html>

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

Is it possible for a single field to validate and accept multiple types of data?

As a newcomer to Yup, I am attempting to validate a field that can be either a string following a specific regular expression or an array of such strings. Below is a functional example of validating a string that matches the regex: { field: yup.string(). ...

javascripttypescriptvalidationyup

Vue Component, switching state

Feeling like I'm losing it, this should be really simple but it's not working... The idea is that when the link is clicked, the display property toggles between true and false. However, it's not working as expected. Vue.component('d ...

javascriptvue.js

Steps for displaying a JSX component for every element in an array

I have a requirement to display a unique jsx component for each element in an array. import { ListView } from './components'; // Custom component const array = ["item1","item2","item3"]; export default function App ...

javascriptreactjs

Reading settings from web.config file in an HTML page

Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...

asp.nethtmlweb-config

Having trouble getting webpack and babel to start using npm

Greetings, wonderful people of the internet! I am a newcomer to the enchanting world of programming and I am facing a perplexing issue. Although Webpack is trying to guide me towards the solution, I seem to be struggling with fixing it on my own. const pa ...

javascriptnode.jsnpmwebpackbabeljs

JavaScript object value not accessible due to SyntaxError: Unexpected token, expected ,

While working on aliases.js, I encountered an issue when attempting to retrieve the value of the 'SELECT_HOST' property from the imported actionTypes object. This led to a "SyntaxError: Unexpected token, expected ," error according to Webpack. I& ...

javascriptnode.jswebpack

Using two different Readable streams to pipe to the same Writable stream multiple times

In my current project, I am facing the challenge of concatenating a string and a Readable stream. The Readable stream is linked to a file that may contain data in multiple chunks, making it quite large. My objective is to combine these two entities into on ...

javascriptnode.jsstringstreampipe

The ComponentDidUpdate function treats the previous state (prevState) and the current state (this

Initially, I had a state update function that looked like this: doChangeValue(data) { const dataNew = this.state.data dataNew[data.id] = data.value this.setState({ ...dataNew, [dataNew[data.id]]: data.value}) } However, I realized that thi ...

javascriptreactjscomponentsstatemutation

What could be causing conflicts with the jQuery Flipcounter in a Magento environment?

Is there a way to incorporate the "flipcounter" feature onto the homepage of my Magento website, which can be accessed at this link? I found the necessary scripts here. However, upon adding the specified scripts, I encountered a problem where the newslett ...

javascriptjquerymagento

How to parse JSON in JavaScript/jQuery while preserving the original order

Below is a json object that I have. var json1 = {"00" : "00", "15" : "15", "30" : "30", "45" : "45"}; I am trying to populate a select element using the above json in the following way. var selElem = $('<select>', {'name' : nam ...

javascriptjqueryjson

getJSON takes precedence over other tasks

I am having a challenge retrieving data in JSON format from the server and displaying it dynamically in a table. The code runs without errors and successfully fetches the data, but for some reason, nothing appears in the table. I suspect there may be an ...

javascriptjquerygetjson

Issue with Bootstrap cards overlapping while searching

On my Bootstrap 4 page, I've incorporated cards that can be searched, displaying only those with matching titles. However, I am facing two main issues. Firstly, when two matching cards are on the same row, they overlap. Secondly, if a matching card is ...

jquerycsstwitter-bootstrapbootstrap-4

What is the best way to extract the information from a neighboring HTML element using Python and Beautiful Soup?

Is there a way to use Python and BeautifulSoup4 to read the next HTML element after locating a specific link in the page source? For instance, consider this snippet of page source: <a class="" onclick="" href="http://moodle.example.com/mod/resource/vie ...

pythonhtmlbeautifulsouphtml-parsingweb-crawler

Chrome and Firefox failing to render background property in CSS

I encountered an issue with my HTML code that I tested on both Chrome and Firefox. The background color of the first div is not displaying correctly in either browser. .box-orange { // without any position declaration background: orange; heigh ...

htmlcssbackground-color

What is the best way to extract message data using discord.js?

Discord.js is an API designed for developers to create plugins for Discord, a popular communication platform. You can find the API code written in JavaScript by visiting https://github.com/hydrabolt/discord.js/ On Discord, users interact on servers where ...

javascriptjsonnode.jscachingdiscord.js

Sass/SCSS is failing to compile on my local environment

As a beginner in SASS, I'm currently attempting to compile my SASS file on my local machine. Unfortunately, I've hit a roadblock and despite trying all the methods mentioned, I continue to encounter the same or similar errors. It's frustrati ...

csssass

Expanding the width of Material UI Javascript Dialog Box

Currently, I am utilizing the dialog feature from Material UI in my React JS project and I am looking to expand its width. After some research, I discovered that there is a property called maxWidth which allows you to adjust the width of the dialog. Howe ...

javascriptreactjsmaterial-ui

"Effortlessly transform a JSON string into a JSON Object with JavaScript - here's how

When I serialize my object using the ASP.net JavaScriptSerializer class and return it to the client side, how can I deserialize the string in JavaScript? ...

javascriptasp.netjsonserialization

How to extract the YouTube video source using jQuery from an iframe snippet

Currently, I am attempting to extract the YouTube source from an iframe embed code and store it as a variable. Suppose my YouTube embed code looks like this: <iframe width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://w ...

jqueryhtmliframeyoutube

The issue with Gulp revRewrite module failing to properly rewrite CSS and JS files within the project

I have been utilizing Gulp v.4 from npm along with the gulp-rev and gulp-rev-rewrite plugins to prevent Cache Busting of CSS and JS files. However, despite going through numerous guides and notes, I am encountering an issue where the links inside my HTML ( ...

javascriptcssnode.jsnpmgulp