這次作的是新手村最後一個挑戰 ▶ Intro component with sign up form 網頁，要完成下列挑戰：
- 根據裝置尺寸更改網頁佈局
- 設定游標懸停時的樣式
- 驗證 email 格式 並顯示錯誤訊息
- 輸入欄位為空時 顯示不同的錯誤訊息
這不就跟上一個挑戰一樣嗎？
沒錯，只是這次有多個欄位，要設定不同的錯誤訊息。
使用 jQuery Validation
因為實在是太好用了，好用到吃手手（？），每次要用驗證功能時都會想到它。
設定 form
記得 name 屬性，後面觸發功能時才會對應到不同的錯誤訊息。
然後我第一次設定就忘了它，後面用好久才想到..
<form action="" method="post" class="subscribe-form" id="subscribeForm">
<input type="text" name="firstName" placeholder="First Name">
<input type="text" name="lastName" placeholder="Last Name">
<input type="email" name="email" placeholder="Email Address">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="submit-btn">Claim your free trial</button>
<p class="subscribe-text">By clicking the button, you are agreeing to our <span>Terms and Services</span></p>
</form>
設定驗證規則 rules
如果是必填欄位，要把 required 設成 true，
驗證 email 格式的話，就要把 email 設成 true。
$('#subscribeForm').validate({
rules: {
firstName: {
required: true
},
lastName: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true,
}
},
此時的錯誤訊息是預設的訊息，所以接著要把訊息改成我們要的。
依據規則設定訊息 messages
// 接續上方 code
messages: {
firstName: "First Name cannot be empty",
lastName: "Last Name cannot be empty",
email: {
required: "Email cannot be empty", // 欄位空白顯示這段
email: "Loos like this is not an email" // email 格式錯誤顯示這段
},
password: "Password cannot be empty"
}
});
完成！
這個挑戰應該讓我稍微髮線往後了一點，
尤其閱讀原文的說明時，差點哭著找英文老師（？），
還好最後順利完成，接著要往中階挑戰邁進了！
