jquery验证以一种形式工作而不是另一种形式

Question

我在标签式索引中的同一页面上有两个表单，如jqueryui.com/tabs/#

我已经包含了 js 文件：

jquery.validate.js、additional-methods.js、jquery.js

第一个 TAB 中的表单：

<form action="#" method="post" accept-charset="utf-8" name="org" id="org" autocomplete="off">         
  <table border="0" cellpadding="4" cellspacing="0">
    <tr>
       <td> <label>Name: </label></td>
       <td><input type="text" name="head" value="" id="head" class="required"  /></td>
    </tr>
    <tr>
      <td><label></label></td>
      <td><input type="submit" name="Submit" value="Add" onclick="javascript:addForm();" /></td>
    </tr>
  </table>
</form>

第二个TAB中的表格：

 <form action="" method="post" accept-charset="utf-8" name="orgEdit" id="orgEdit" autocomplete="off">
   <table border="0" cellpadding="4" cellspacing="0">
     <tr>
       <td><label>Head: </label></td>
       <td><input type="text" name="editHead" value="" id="editHead" class="required"  /></td>
     </tr>
     <tr>
        <td><label></label></td>
        <td><input type="submit" name="Submit" value="Update" onclick="javascript:editForm();" /></td>
     </tr>
   </table>
 </form>

点击这两个表单的提交按钮的验证部分如下，

<script>
function addForm() {
    $("#org").validate({
        rules: {
            head: {
                required:true,
                letterswithbasicpunc:true
            },
        },
        messages: { 
            head: {
                required:"&nbsp;Please enter head name.",
                letterswithbasicpunc:"&nbsp;Please enter only characters."
            },
        },
        submitHandler: function(form) {
            $.post("url",$("#org").serialize(),function(data){ 
                if(data != 'E') {
                    alert("Data Inserted Successfully.");
                    location.reload();
                } else
                    alert("Failed.");
            });
        }
    });
}

function editForm() {
    $("#orgEdit").validate({ 
        rules: {
            editHead: {
                required:true,
                letterswithbasicpunc:true
            },
        },
        messages: { 
            editHead: {
                required:"&nbsp;Please enter head name.",
                letterswithbasicpunc:"&nbsp;Please enter only characters."
            },
        },
        submitHandler: function(form) { 
            $.post("url",$("#orgEdit").serialize(),function(data){
                if(data != 'E') {
                    alert("Data Inserted Successfully.");
                    location.reload();
                } else
                    alert("Failed.");
            });
        }
    });
}
    </script>

jquery 验证在添加数据时工作正常，但在编辑表单中失败。 请帮我解决这个问题。

Answer 1

您应该将代码更改如下：

<form onsubmit="return editForm(this);" action="" method="post" accept-charset="utf-8" name="orgEdit" id="orgEdit"      autocomplete="off">
   <table border="0" cellpadding="4" cellspacing="0">
     <tr>
       <td><label>Head: </label></td>
       <td><input type="text" name="editHead" value="" id="editHead" class="required" /></td>
    </tr>
    <tr>
        <td><label></label></td>
        <td><input type="submit" name="Submit" value="Update" /></td>
    </tr>
   </table>
</form>

Javascript：

function editForm(form) {
    $(form).validate({ 
      rules: {
        editHead: {
            required:true,
            letterswithbasicpunc:true
        },
      },
      messages: { 
        editHead: {
            required:" Please enter head name.",
            letterswithbasicpunc:" Please enter only characters."
         },
       },
      submitHandler: function(form) { 
        $.post("url",$("#orgEdit").serialize(),function(data){
            if(data != 'E') {
                alert("Data Inserted Successfully.");
                location.reload();
            } else
                alert("Failed.");
        });
      }
    });
   return $(form).valid();
   }