內嵌有效Javascript表單驗證

Question

我正在處理聯繫表單，並需要一些內嵌的JavaScript表單驗證。我已經有了PHP驗證，但是我想要在http://twitter.com/signup上進行一些有效的表單驗證。我希望在輸入後顯示並隱藏p標籤。這是我的html代碼。

<form class="contact" method="POST" enctype="multipart/form-data" action="validate.php"> 


    <label for="fname">First Name*<br /></label> 
    <input type="text" id="fname" style="font-family: Gochi Hand;" name="fname" placeholder="First" autofocus required autocomplete="on" /> 
    <div class="notices"> 
     <p id="helper" style="color:green;" class="g-notice">First Name Looks Good.</p> 
     <p id="helper" style="color:red;" class="r-notice">A First Name is required.</p> 
     <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your First Name.</p> 
    </div> 
    <br /><br /> 

    <label for="lname">Last Name*<br /></label> 
    <input type="text" id="lname" style="font-family: Gochi Hand;" name="lname" placeholder="Last" required autocomplete="on" /> 
    <div class="notices"> 
     <p id="helper" style="color:green;" class="g-notice" style="color:green; ">Last Name Looks Good.</p> 
     <p id="helper" style="color:red;" class="r-notice">A Last Name is required.</p> 
     <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Last Name.</p> 
    </div> 

    <br /><br /> 

    <label for="email">Email Address*<br /></label> 
    <input type="email" name="email" style="font-family: Gochi Hand;" id="email" placeholder="example@website.com" pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" required autocomplete="on" /> 
    <div class="notices"> 
     <p id="helper" style="color:green;" class="g-notice">Email Looks Good.</p> 
     <p id="helper" style="color:red;" class="r-notice">A Email is required.</p> 
     <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Email.</p> 
    </div> 

    <br /><br /> 

    <label for="url">Website<br /></label> 
    <input type="url" name="url" id="url" style="font-family: Gochi Hand;" placeholder="http://website.com" pattern="^(http|https)://.+(.[a-zA-Z])$" autocomplete="on" /> 
    <div class="notices"> 
     <p id="helper" style="color:green;" class="g-notice">URL Looks Good.</p> 
     <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your URL.</p> 
    </div> 

    <br /><br /> 


    <label for="age">Age*<br /></label> 
    <input type="text" size="3" id="age" name="age" style="font-family: Gochi Hand;" required class="age" required placeholder="Age" pattern="^\d+$" autocomplete="on" /> 
    <div class="notices"> 
     <p id="helper" style="color:green;" class="g-notice">Age Looks Good.</p> 
     <p id="helper" style="color:red;" class="r-notice">An Age is required.</p> 
     <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Age.</p> 
    </div> 

    <br /><br /> 

    <label for="comments">Comments*<br /></label> 
    <textarea style="font-family: Gochi Hand;" required id="comments" name="comments" cols="30" rows="10"></textarea> 

    <br /><br /> 

    <input type="hidden" value="True" name="go" id="go" /> 

    <input style="color:red;" type="submit" class="submit" value="Send!" /> 
    </form> 

任何建議或幫助將值得一噸。

Answer 1

這裏是一個樣表

HTML

<form id='test'> 
Name * <input id="name" type="text"><span id='errName' class='error'>This is a required field</span> 
</form> 

CSS

.error{ 
    display:none; 
    color:red; 
} 

的javascript

document.getElementById('test').onsubmit=function(){ 
    if(document.getElementById('name').value=''){ 
    document.getElementById('errName').style.display='block'; 
    return false; 
    } 
    else{ 
    return true; 
    } 
} 

這是一個非常簡單的例子，有不同的方法將其。例如，如果存在錯誤而不是一個隱藏，則可以追加一個元素。另外，當input元素上有onblur事件時，您可以添加另一個函數來檢查有效值。

Answer 2

通常，您希望創建一個事件處理程序，當用戶與輸入字段交互並評估輸入值以確定要顯示的消息時，將調用該事件處理程序。顯示相應的消息，並隱藏所有其他消息。您可以在瀏覽器中執行簡單的模式匹配，或使用AJAX將輸入發送到服務器以評估更復雜的驗證，例如電子郵件是否已被使用。

twitter註冊表單使用事件組合來觸發評估腳本。它看起來像onclick（或onfocus），onchange和onblur都被使用。點擊時會顯示說明（您的「.h-notice」等效項），並且模糊輸入被評估（元素失去焦點）。

我會使用jQuery，因爲你需要複雜的元素選擇和事件處理。你可以寫簡單的JavaScript來實現相同的效果，但它需要更多的代碼。名字字段的jQuery代碼如下所示：

<script type="text/javascript"> 
    jQuery(function($) { 
     //hide all the messages 
     $('.g-notice, .h-notice, .r-notice').hide(); 

     //create first name validator 
     var fnameValidator = function() { 
      var input = $('#fname'); 
      var notices = input.next('.notices'); 
      var g = notices.find('.g-notice'); 
      var h = notices.find('.h-notice'); 
      var r = notices.find('.r-notice'); 

      //hide all notices before deciding which to show 
      g.hide(); 
      h.hide(); 
      r.hide(); 

      if (input.val() == '') { 
       //input field is empty, show the help notice 
       h.show(); 
      } else if (input.val().match(/[^\w\s]/) === null) { 
       //input field is valid, show the good notice 
       g.show(); 
      } else { 
       //show required/error message 
       r.show(); 
      } 
     }; 

     //bind event handlers for the first name field 
     $('#fname').click(fnameValidator).change(fnameValidator); 
    }); 
</script> 

BTW：HTML元素ID應該是唯一的。你可以讓「助手」成爲一個班級，或者讓每個個人身份不同（例如「fname-helper-h」）。