0
Я создал страницу продукта, в двух отдельных местах люди могут вводить свой адрес электронной почты. Если они помещают правильно отформатированное электронное письмо, я хочу, чтобы они получили сообщение проверки, если они ввели неверно отформатированное электронное письмо, я хочу, чтобы они получили сообщение об ошибке.Как сделать проверки и сообщения об ошибках приступить к работе с помощью Javascript?
Мой профессор подключил к базе данных, которую он построил в Ruby On Rails, которая проверяет это для нас, и это уже успешно связано, но нам нужно использовать JavaScript для настройки сообщений об ошибках и проверки, которые появляются на экран для пользователя. По какой-то причине я не могу заставить их пройти, и мне было интересно, есть ли у кого-нибудь какие-либо предложения о том, где я запутался.
Мой профессор сказал, что здесь хорошо искать помощь, если мы застряли, и я действительно застрял. Я играю с вариантами в течение нескольких часов и, похоже, ничего не могу понять. Любая помощь была бы чрезвычайно оценена, спасибо!
Это то, что он должен выглядеть, когда вы отправляете неправильно отформатированные по электронной почте:
Это то, что происходит, когда вы передаете в неправильном формате электронной почты (ничего не приходит на все):
Это то, что он должен выглядеть, когда вы отправляете в правильном формате электронной почты:
Это то, что происходит, когда вы передаете в правильном формате электронной почты (ничего не приходит на всех):
Это то, что происходит в console.log, когда я нажимаю на кнопке.
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'https://web2-product-page/herokuapp.com/subscribers',
data : formData,
dataType : 'json'
}).done(function(data) {
console.log(data);
$('.confirmation').fadeIn();
$('.error-message').text("");
$('input[name=email]').val("");
}).fail(function(data) {
console.log(data);
var errorMessage = JSON.parse(data.responseText).email[0];
$('.error-message').text(errorMessage);
$('.confirmation').hide();
});
event.preventDefault();
});
});* {
box-sizing: border-box;
}
@font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
.confirmation {
display: none;
}
.error-message {
display: none;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1080px;
margin: auto;
padding-top: 100px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: lighter;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: lighter;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: \t #00AF78;
font-weight: bold;
}
#hero {
background-color: #62CE9C;
height: 650px;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herocontent {
margin: auto;
width: 900px;
}
#herotext {
float: left;
width: 600px;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
align-items: center;
display: block;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
height: 150px;
padding-top: 10px;
width: 150px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 450px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 10px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
padding-top: 10px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 450px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container clearfix" id="hero">
<div id="herocontent">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="[email protected]">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message">Incorrect E-mail Address.</p>
</form>
</div>
<img src="images/phone.png"/>
</div>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>@devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>@RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>@MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="[email protected]">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message">Incorrect E-mail Address.</p>
</form>
</div>
</body>
</html>
Было бы лучше, если бы вы разместили то, что вы пробовали, и какой результат вы получаете против ожидаемого; CSS вообще не нужно публиковать, если ваш вопрос о функциональности JS. Кроме того, как выглядит ответ JSON от вызова AJAX как для правильно отформатированного письма, так и для неверно отформатированного? Имейте в виду, что обратный вызов '.fail()' на вызов AJAX является, если для того, когда вызов к указанному URL не работает (т. Е. Возвращает код ошибки HTTP), - тогда как вам может потребоваться проверить JSON для фактической оценки электронной почты пользователь отправил. – Stevangelista
Собственно, CSS может помочь здесь, потому что вопрос о том, как выглядит страница. –
Ваш jQuery кажется ОК. Вы знаете, преуспевает ли ваш вызов Ajax? (Если это неверно сконфигурировано, вы всегда получите условие «сбой») http://stackoverflow.com/questions/21897398/how-do-i-debug-jquery-ajax-calls –