我創建了一個產品頁面,在兩個不同的地方人們可以輸入他們的電子郵件。如果他們輸入格式正確的電子郵件,我希望他們得到驗證信息,如果他們輸入了錯誤格式的電子郵件,我希望他們收到錯誤信息。如何使用Javascript進行驗證和錯誤消息?
我的教授是有我們連接到他建在Ruby中,用來驗證這對我們的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>
如果您準確地發佈了您嘗試過的內容,以及您獲得的結果和期望的結果會更好;如果你的問題是關於JS功能的話,CSS通常不需要發佈。另外,來自AJAX調用的JSON響應對於格式正確的電子郵件和格式錯誤的電子郵件來說是什麼樣的?請記住,AJAX調用中的'.fail()'回調是指當對指定的URL調用失敗時(即返回HTTP錯誤代碼) - 而您可能需要檢查JSON以獲得對電子郵件的實際評估用戶提交。 – Stevangelista
實際上,CSS可以在這裏幫助,因爲問題是關於頁面的顯示方式。 –
你的jQuery似乎沒問題。你知道你的Ajax調用是否成功嗎? (如果它被錯誤配置,你將永遠得到你的「失敗」條件)http://stackoverflow.com/questions/21897398/how-do-i-debug-jquery-ajax-calls –