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, Jul 20 '16 at 07:45

score 0 · Answer 1 · answered Jul 20 '16 at 07:51

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

answered Jul 20 '16 at 07:51

Ranjan

929
1
6
19

http://stackoverflow.com/questions/5147438/match-two-fields-with-jquery-validate-plugin – Ranjan Jul 20 '16 at 07:53
i added this JS code, but and changed the '#myform#' to '#form'. but it hasn't done anything. – D.Jones Jul 20 '16 at 09:10
Did you added j query? – Ranjan Jul 20 '16 at 09:13
I am a complete novice when it comes to adding this like this. So I have no idea where to add what. – D.Jones Jul 20 '16 at 09:20
Edit your post and add it again – Ranjan Jul 20 '16 at 09:22
Add what again, sorry? – D.Jones Jul 20 '16 at 09:23
just edit your main question and paste your full code. – Ranjan Jul 20 '16 at 09:25
There is some sensitive coding in the code so I'd prefer not to, surely the above should be enough? I'll include my .js file coding though. – D.Jones Jul 20 '16 at 09:31

Aswathy · Accepted Answer · 2016-07-20T11:56:13.257

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! — Mike Zavarello, Jul 20 '16 at 11:10

Email Verification - HTML

2 Answers2