Email Verification - HTML

Question

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>

JS

$('.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.

id can't have space in them, use javascript to check if #email value is the same as #repeat-email — slashsharp
– slashsharp, Commented Jul 20, 2016 at 7:45

Aswathy · Accepted Answer · 2016-07-20 11:56:13Z

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>

Please provide some explanation as to how this solves the problem, so that others who read this page can understand the context. Thank you!

Ryan · Accepted Answer · 2016-07-20 07:51:43Z

0

$(document).ready(function() { $('#myform').validate({ rules: { 'entry[email]': { required: true, minlength: 5 }, field2: { equalTo: '[name="entry[email]"]' } }, submitHandler: function(form) { // for demo alert('valid form'); return false; } });

});

Check here