多行表单验证

<html>
<head>
</head>
<body>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
  
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="id" type="text" /></td>
    <td><input name="other1" type="text" /></td>
    <td><input name="user" type="text" /></td>
    <td><input name="other2" type="text" /></td>
    <td><input name="name" type="text" /></td>
  </tr>
  <tr>
    <td><input name="id" type="text" /></td>
    <td><input name="other1" type="text" /></td>
    <td><input name="user" type="text" /></td>
    <td><input name="other2" type="text" /></td>
    <td><input name="name" type="text" /></td>
  </tr>
  <tr>
    <td><input name="id" type="text" /></td>
    <td><input name="other1" type="text" /></td>
    <td><input name="user" type="text" /></td>
    <td><input name="other2" type="text" /></td>
    <td><input name="name" type="text" /></td>
  </tr>
</table>
  <script>
    $('input[type=text]').focus(function(){
var t=$(this).parents('tr').prev();
      if(!t.length)return;
      var a=t.find('input[name=id]');
      if(!a.val()){alert('error');a.focus();return false;}
      //---------
    })
    
  </script>
</body>
</html>

解决方案 »

  1.   

    这个只对"id"最了判断，没有对“user”和“name”进行判断，我自己在你写的基础上加了2段，是不是应该可以更简化一些  <script>
        $('input[type=text]').focus(function(){
    var t=$(this).parents('tr').prev();
          if(!t.length)return;
          var a=t.find('input[name=id]');
          if(!a.val()){alert('error');a.focus();return false;}
      var b=t.find('input[name=user]');
          if(!b.val()){alert('error');b.focus();return false;}
      var c=t.find('input[name=name]');
          if(!c.val()){alert('error');c.focus();return false;}
          //---------
        })
         
      </script>
      

  2.   


    slwsss，这段又测了一下，有一个问题，如果有10行表格，点了一下第9行，那么会把1，2，3，4，5，6，7，8行的错报完，请帮忙修改成，如果是10行表单，第1行有正常值，在第9行输入，只报一个错，反回到第2行，谢谢。
      

  3.   

      $('input[type=text]').focus(function(){$(this).parents('table').find('tr').each(function(){
    var t=$(this);
          var a=t.find('input[name=id]');
          if(!a.val()){alert('error');a.focus();return false;}      //---------
    });
        })
      

  4.   


    这个进入了死循环模式，"error" 轰炸
      

  5.   

    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
       
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
    </table>
      <script>
      $('input[type=text]').focus(function(){
    var th=$(this).parents('tr')[0];
    $(this).parents('table').find('tr').each(function(){
      if(th==this)return false;
      var t=$(this);
          var a=t.find('input[name=id]');
          if(!a.val()){alert('error');a.focus();return false;}      //---------
    });
        })
      </script>
    </body>
    </html>
      

  6.   


    最后一个小问题，如果表格加一个表头，等于是顶部多了一个tr,这段代码应该怎么修改，我把var th=$(this).parents('tr')[0];改成var th=$(this).parents('tr')[1];不起作用。 点第一行的时候就开始报错。
      

  7.   


      $('input[type=text]').focus(function(){
    var th=$(this).parents('tr')[0];
    $(this).parents('table').find('tr:not(:first)').each(function(){
      if(th==this)return false;
      var t=$(this);
          var a=t.find('input[name=id]');
          if(!a.val()){alert('error');a.focus();return false;}
     
          //---------
    });
        })
      

  8.   

    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
       
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>id</th>
        <th>other1</th>
        <th>user</th>
        <th>other2</th>
        <th>name</th>
      </tr>
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
      <tr>
        <td><input name="id" type="text" /></td>
        <td><input name="other1" type="text" /></td>
        <td><input name="user" type="text" /></td>
        <td><input name="other2" type="text" /></td>
        <td><input name="name" type="text" /></td>
      </tr>
    </table>
    <script>
    $(function() {
      $(':text').click(function(){
        if($(this).val()) return false;
        $(this).parents('table').find(':text').each(function() {
          if(! $(this).val()) {
            alert($(this).attr('name') + ':error');
            $(this).focus();
            return false;
          }
        })
      })
    });
    </script>