Подтверждение электронной почты - HTML

Приносим извинения, если этот вопрос был задан, я не могу найти точно такой же вопрос, поэтому приступим.

Я создал форму в html, и я в основном хочу, чтобы форма смотрела на то, что пользователь ввел в качестве своего адреса электронной почты, а затем мне приходилось повторно набирать, но отмечать, если он не совпадает.

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

Любая помощь будет принята с благодарностью, и, пожалуйста, относитесь ко мне как к полному новичку, когда дело касается форм.


containers forms html email required
person D.Jones    schedule 20.07.2016    source источник
comment
id не может иметь места, используйте javascript, чтобы проверить, совпадает ли значение #email с # repeat-email   -  person slashsharp    schedule 20.07.2016

Ответы (2)


arrow_upward
0
arrow_downward

пожалуйста, внесите некоторые изменения в свой код и скрипт. Я думаю, что приведенный ниже код может быть вам полезен.

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

и внесите некоторые изменения в свой раздел html, например измените имя и идентификатор класса, как показано ниже.

<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>
person Aswathy    schedule 20.07.2016
comment
Пожалуйста, объясните, как это решает проблему, чтобы другие, читающие эту страницу, могли понять контекст. Спасибо! - person Mike Zavarello; 20.07.2016

arrow_upward
0
arrow_downward 

$(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;
    }
});

});

Проверить здесь

person Ryan    schedule 20.07.2016
comment
stackoverflow.com/questions/5147438 / - person Ryan; 20.07.2016
comment
Я добавил этот JS-код, но изменил "# myform #" на "#form". но это ничего не дало. - person D.Jones; 20.07.2016
comment
Вы добавили j-запрос? - person Ryan; 20.07.2016
comment
Я полный новичок, когда дело доходит до такого добавления. Так что я понятия не имею, где что добавить. - person D.Jones; 20.07.2016
comment
Отредактируйте свой пост и добавьте его снова - person Ryan; 20.07.2016
comment
Что еще добавить, извините? - person D.Jones; 20.07.2016
comment
просто отредактируйте свой основной вопрос и вставьте полный код. - person Ryan; 20.07.2016
comment
В коде есть некоторая чувствительная кодировка, поэтому я бы предпочел не делать этого, конечно, этого должно быть достаточно? Я все же включу кодировку файла .js. - person D.Jones; 20.07.2016