我自己的jQuery驗證版本

Question

我是jQuery的新手，所以我試圖創建自己的表單驗證。 AJAX提交很好，但驗證本身正在殺死我。

的概念是這樣的：

1. 用戶點擊提交按鈕 - 「美化我。
2. 如果需要三個字段（#name-input，#email-input，#phone-input）的一個（或全部）不填寫，比錯誤類（.validation-error）應該被添加到一個，這是不填充。並且，整個事情應該立即滾動到#validation-fail-msg，如果發生錯誤（默認情況下，此消息被隱藏），則顯示該消息。

我附上一個codepen與我的「創造」，所以你可能會有所幫助，如果有機會。 提前謝謝你們。

http://codepen.io/anon/pen/oxjZav

<div class="b-form-wrap"> 
    <p id="validation-fail-msg">Please, fill in the missing fields.</p> 
    <form novalidate id="feedback-form"> 
    <div class="b-form-box"> 
     <p class="form-box__text form-box__text_no-pad">What's your name?<sup class="form-box__sup">*</sup></p> 
     <input type="text" name="name" maxlength="30" required id="name-input" class="form-box__input-field"> 
     <p class="form-box__text">What's your phone number?<sup class="form-box__sup">*</sup></p> 
     <input type="text" name="phone" maxlength="30" required id="phone-input" class="form-box__input-field"> 
     <p class="form-box__text">What's your email?<sup class="form-box__sup">*</sup></p> 
     <input type="text" name="email" maxlength="50" required id="email-input" class="form-box__input-field"> 
    </div> 
    <div class="b-form-box b-form-box_left-mrg"> 
     <p class="form-box__text form-box__text_no-pad">How can I help you?</p> 
     <textarea name="text" class="form-box__input-field form-box__input-field_textarea"></textarea> 
    </div> 
    <button class="form-box__button">Beautify me</button> 
    <p id="validation-success-msg">Thanx, I'll contact you very soon.</p> 
    </form> 

function feedback_validate() { 
    var result = true; 
    var f_names = ["#name-input", "#email-input", "#phone-input"]; 
    var el; 

    f_names.forEach(function(item) { 
     el = $(item); 
     if (el.val() == "") { 
     result = false; 
     el.addClass("validation-error"); 
     } else { 
     el.removeClass("validation-error"); 
     }  
    }); 

    if (result) { 
    $("#validation-fail-msg").hide(); 
    } else { 
    $("#validation-fail-msg").show(); 
    } 

    return result; 
} 

Answer 1

我建了一個jsfiddle，我認爲這與預期的funcionality符合以下標準：

$(document).ready(function(){ 
    $(".form-box__button").click(function(e){ 
    e.preventDefault();  
    feedback_validate(); 
    }); 
}); 

...

if (result) { 
    $("#validation-fail-msg").hide(); 
    } else { 
    $("#validation-fail-msg").show(); 

    $('html, body').animate({ 
     scrollTop: $("#validation-fail-msg").offset().top 
    }, 1000); 

基本上，我添加了一個處理程序，用於防止提交表單（您應該手動處理）並調用之前未被調用的驗證函數。我還在顯示的故障消息的特定情況下添加了滾動功能。

希望它有幫助！