在字段旁邊顯示驗證錯誤Javascript

Question

我使用Validate.Js來驗證我的HTML表單，使用jQuery &它完美地工作。 但我需要在每個字段旁邊顯示錯誤，而不是在頁面頂部顯示所有錯誤的摘要。

HTML：

<div class="success_box">All of the fields were successfully validated!</div> 
<div class="error_box"></div> 

    <form name="example_form"> 
    <label for="req">Required field:</label> 
    <label for="alphanumeric">Alphanumeric field:</label> 
    <div id="AlphaNumeric"></div> 

    <input name="req" id="req" /> 
    <input name="alphanumeric" id="alphanumeric" /> 

    <label for="password">Password:</label> 
    <label for="password_confirm">Password Confirmation (match password):</label> 

    <input name="password" id="password" type="password" /> 
    <input name="password_confirm" id="password_confirm" type="password" /> 

    <label for="email">Email:</label> 
    <label for="minlength">Min length field (min. 8 chars):</label> 

    <input name="email" id="email" /> 
    <input name="minlength" id="minlength" /> 

    <label for="tos_checkbox">Required checkbox (example: Terms of Service)</label> 
    <input name="tos_checkbox" id="tos_checkbox" type="checkbox" /> 

    <button class="button gray" type="submit" name="submit">Submit</button> 
</form> 

的JavaScript：

new FormValidator('example_form', [{ 
    name: 'req', 
    display: 'required',  
    rules: 'required' 
    }, { 
    name: 'alphanumeric', 
    rules: 'alpha_numeric' 
    }, { 
    name: 'password', 
    rules: 'required' 
    }, { 
    name: 'password_confirm', 
    display: 'password confirmation', 
    rules: 'required|matches[password]' 
    }, { 
    name: 'email', 
    rules: 'valid_email' 
    }, { 
    name: 'minlength', 
    display: 'min length', 
    rules: 'min_length[8]' 
    }, { 
    name: 'tos_checkbox', 
    display: 'terms of service', 
    rules: 'required' 
    }], function(errors, event) { 
    var SELECTOR_ERRORS = $('.error_box'), 
     SELECTOR_SUCCESS = $('.success_box'); 

    if (errors.length > 0) { 
     SELECTOR_ERRORS.empty(); 

     for (var i = 0, errorLength = errors.length; i < errorLength; i++) { 
      SELECTOR_ERRORS.append(errors[i].message + '<br />'); 
     } 

     SELECTOR_SUCCESS.css({ display: 'none' }); 
     SELECTOR_ERRORS.fadeIn(200); 
    } else { 
     SELECTOR_ERRORS.css({ display: 'none' }); 
     SELECTOR_SUCCESS.fadeIn(200); 
    } 

    if (event && event.preventDefault) { 
     event.preventDefault(); 
    } else if (event) { 
     event.returnValue = false; 
    } 
    }); 

是否有改變的顯示樣式的方法？有沒有更好的腳本可以做到這一點？

Answer 1

Quote：「但我需要顯示每個字段旁邊的錯誤，而不是顯示頁面頂部的所有錯誤的摘要......有沒有方法來改變顯示樣式？」

NO。 As per documentation，沒有列出如何放置錯誤消息的選項。

由於該插件的描述說明，「模擬了CodeIgniter表單驗證API」，它告訴我整個問題的目的是在表單上方的單個摘要框中顯示錯誤消息，就像CodeIgniter驗證一樣。如果您希望在每個字段旁邊顯示單個錯誤消息，則只需選擇錯誤的插件即可。

Quote：「...有沒有更好的腳本可以做到這一點？

是。 jQuery Validate插件由jQuery團隊的成員開發。有一個巨大的支持和大量的選擇基礎。

「插件是由喬恩Zaefferer的 成員jQuery開發團隊，在jQuery UI的團隊和QUnit的維護者 主要開發人員編寫和維護的，它於2006年開始早在jQuery的初期，並從此更新和改進了 。「

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation/

默認情況下，錯誤顯示 「旁邊的」 每個字段。

觀看演示：http://jsfiddle.net/UGyXP/

的jQuery：

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     rules: { 
      field1: { 
       required: true, 
       minlength: 5 
      }, 
      field2: { 
       required: true, 
       email: true 
      } 
     } 
    }); 

}); 

HTML：

<form id="myform"> 
    <input type="text" name="field1" /> 
    <input type="text" name="field2" /> 
    <input type="submit" /> 
</form>