〖網頁挑戰〗 Intro component with sign up form page

這次作的是新手村最後一個挑戰 ▶ 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"
    }
});

完成！

這個挑戰應該讓我稍微髮線往後了一點，
尤其閱讀原文的說明時，差點哭著找英文老師（？），
還好最後順利完成，接著要往中階挑戰邁進了！

挑戰頁面 ▶ Intro component with sign-up form