jquery表單驗證

Question

我只是試圖打印一個錯誤消息，如果有人留下文字字段空白使用jquery.But它沒有被顯示。 這是html代碼：

<form id="form1" runat="server"> 
    <div> 
    <table> 
    <tr> 
    <td> 
    <label>Name</label></td> 
    <td> <input class="required" type="text" name="name" id="name" /><span>(required)</span></td> 
    </tr><tr> 
    <td><br/><label>Address</label></td> 
    <td><input class="required" type="text" name="address" id="address"/><span>(required)</span></td></tr> 
    </table> 
    </div> 
    </form> 

這是jquery的代碼。

$(document).ready(function() { 
    var requiredFlag = ' * '; 
    $('form :input').filter('.required').next('span').text(requiredFlag).end(); 
    if ($(this).is('.required')) { 
     if (this.value == '') { 
     var errorMessage = 'This is a required field'; 
          }; 
      $('span></span').text(errorMessage).appendTo($(this)); 
          }; 
}); 

可能是我缺少的東西。 幫助專家。 謝謝。

Answer 1

1. this在代碼是指window/document對象不是input元件;
2. 您的代碼中有一些拼寫錯誤=>$('span></span');
3. 有一個在你的驗證inputs
4. 代碼沒有event handler您的標記span元素，也沒有必要產生一個新的
5. 可以使用的形式submit事件驗證輸入
6. 的:input選擇已棄用

試試這個：

var errorMessage = 'This is a required field'; 
$('form input.required').next().text('*'); 

$('form').submit(function(){ 
    var errors = 0; 
    $('input.required', this).each(function(){ 
     if (this.value == '') { 
      $(this).next().text(errorMessage); 
      errors++; 
     } 
    }) 
    if (errors > 0) { 
    return false // prevents the default action of the event if there are errors 
    } 
}) 

1. submit()
2. next()
3. each()

Answer 2

我不認爲這是一個很好的選擇：$('span></span')。使用jQuery Siblings 選擇，並用的.text（）或.html改變跨度文本（）函數 http://api.jquery.com/html/