Email Verification - HTML

Apologies if this has been asked, I can't seem to find the exact same question, so here goes.

I have created a form, in html, that I basically want the form to look at what the user has typed as their email address, and then have to retype but flag up if it doesn't match.

<form>
  <div class="input-container">
    <input type="text" id="Username" required="required"/>
    <label for="Username">@Username</label>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <input type="email" id="email" required="required"/>
    <label for="email">Email</label>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <input type="email" id="Repeat email" required="required"/>
    <label for="Repeat email">Repeat Email</label>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <button><span>Next</span></button>
  </div>
</form>

$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

Any help would be greatly appreciated and please treat me as a complete novice when it comes to forms.

Solution

please make some changes in your code and script.I think below code may be useful to you.

<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$("#email").change(function() {

        var pass = $("#Repeat").val();
        var email = $("#email").val();
        if (pass === email) {
            $(".bar1").html("email match");
        }
else {
            $(".bar1").html("<span style='color:goldenrod;font-size: 11px;margin-left: 21px;font-family: Arial,Helvetica,sans-serif;'>email does not Match.</span>");
        }
    });
$("#Repeat").change(function() {
var pass = $("#Repeat").val();
        var email = $("#email").val();
        if (pass === email) {
            $(".bar2").html("email match");
             $(".bar1").hide();
        }
        else {
            $(".bar2").html("<span style='color:goldenrod;font-size: 11px;margin-left: 21px;font-family: Arial,Helvetica,sans-serif;'>email does not Match.</span>");

        }
    });

});
</script>
</head>

and make some changes in your html section like changing class name and id as below.

<form>


<div class="input-container">
 <input type="text" id="Username" required="required"/>
<label for="Username">@Username</label>
<div class="bar"></div>
  </div>
<div class="input-container">
<input type="email" id="email" required="required"/>
<label for="email">Email</label>
<div class="bar1"></div>
</div>
<div class="input-container">
<input type="email" id="Repeat" required="required"/>
<label for="Repeat email">Repeat Email</label>
<div class="bar2"></div>
</div>
<div class="button-container">
<button><span>Next</span></button>
</div>
</form>