Javascript 使用jquery.validate根据使用的表单验证提交的表单

我目前在一个页面上有两个表单，一个是更新表单，一个是添加表单，我要做的是在提交任何一个表单时，拉取该表单的id，连同操作，验证特定表单，然后从Web服务器加载返回

我通过专门使用每个表单的id来实现它，但是js代码重复了两次，我希望它更具动态性

<script src="assets/js/jquery-1.8.2.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/jquery.validate.js"></script>


<div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="update">                
            <form action="php/update_level.php" method="post" id="form1">
                <h2>Update Level</h2>
                <label>Select Bag Level</label>
                <select id="target" name="levelSelect"> <option selected>Select</option>
                    <?php
                    foreach($result as $row)
                    {?>
                        <option><?php echo $row['Level'] ?></option>
                    <?php
                    }
                    ?>
                </select>
                <div id="upForm">
                </div>
                <div class="message">

                </div>
            </form>
        </div>
        <div class="tab-pane" id="addNew">                
            <form action="php/add_level.php" id="form2">
                <h2>New Level</h2>    
                <label>Level</label>
                <input class="required" maxlength="10" minlenght="1" type="text" name="level" placeholder="Level">
                <label>Description</label>
                <textarea class="required" name="description"  rows="3" placeholder="Description of level type"></textarea>  
                </br>
                <div class="message">

                </div>
                <div class="form-actions">
                <button id="inFormSub" type="submit" class="btn btn-large btn-primary">Submit</button>
                </div>
            </form>                   
        </div>
    </div>

这很有效

    $('#form1').validate({
    submitHandler: function() {
        var action = $('#form1').attr('action');

        console.log(action + ' validate1');
        $('#form2').find('div.message').load(action, $('#form1').serializeArray());            
    }
});    

$('#form2').validate({

    submitHandler: function() {
        var action = $('#form2').attr('action');

        console.log(action + ' validate2');
        $('#form2').find('div.message').load(action, $('#form2').serializeArray());            
    }
});   

---

我对JS和Jquery的了解充其量也不多，我可能会直面解决方案

您可以在submitHandler上使用表单变量并获取id和操作

...
submitHandler: function(form){

    console.log($(form).attr('id'), $(form).attr('action'));    

   ...
}

$（this）.attr（“id”）

调用只返回元素的id，但这不是一个propper css选择器，因此需要添加hash符号

尝试将呼叫更改为：

$("#"+id).validate({
   //validate code here
})

---

应用每个元素都需要特定数据的插件的一种常见方法是使用

each（）

在元素上循环，这样您就可以在循环中访问

this

，以便轻松访问单个表单元素，而无需复制每个元素的代码

$('#form1,#form2').each(function() {
    var $form = $(this);
    var action = $form.attr('action');
    $form.validate({
        submitHandler: function() {           
            $form.find('div.message').load(action, $form.serializeArray());
        }
    });
});

---

一位朋友提到，当我提交表单后，进行更改会导致表单触发并根据提交的表单选择正确的id和操作，但第一次单击提交时，验证似乎不会触发。也许这会有所帮助：这也是我最终找到的解决方案。谢谢

$('#form1,#form2').each(function() {
    var $form = $(this);
    var action = $form.attr('action');
    $form.validate({
        submitHandler: function() {           
            $form.find('div.message').load(action, $form.serializeArray());
        }
    });
});