2016-07-20 18 views
0

Entschuldigung, wenn dies gefragt wurde, ich kann nicht scheinen, genau die gleiche Frage zu finden, also hier geht.E-Mail Verifizierung - HTML

Ich habe ein Formular erstellt, in HTML, das ich im Grunde möchte das Formular zu sehen, was der Benutzer als ihre E-Mail-Adresse eingegeben hat, und müssen dann erneut eingeben, aber Flag, wenn es nicht übereinstimmt.

<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'); 
 
});

Jede Hilfe wäre sehr dankbar und bitte mich als kompletter Anfänger behandeln, wenn es um Formen kommt.

+0

id kann nicht in ihnen Raum, Javascript verwenden zu überprüfen, ob #email Wert der gleiche wie # wiederholen-E-Mail ist – slashsharp

Antwort

0

bitte einige Änderungen in Ihrem Code vornehmen und script.I denken unten Code für Sie nützlich sein können.

<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> 

und nehmen Sie einige Änderungen in Ihrem HTML-Abschnitt wie Ändern des Klassennamens und der ID wie unten.

<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> 
+0

Bitte erläutern Sie, wie ** ** das Problem gelöst wird, damit andere, die diese Seite lesen, den Kontext verstehen können. Vielen Dank! –

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

+0

http://stackoverflow.com/questions/5147438/match-two-fields- with-jquery-validate-plugin – Ranjan

+0

leider hat das nicht funktioniert für mich :( –

+0

dann was hast du bisher versucht dieses Javascript – Ranjan