使用 jQuery 插件的多表单验证通过 onclick 提交而无需提交按钮

Question

我有多个表单，但需要通过 jquery 验证插件进行验证。当我使用提交按钮时它工作正常但是当我使用 jquery 点击功能提交表单时它只适用于第一个表单而其他表单不起作用。

这是我的代码......

HTML...

<form class="validateForm">
    <div class="form-group has-feedback">
       <input id="form-field-9" class="form-control new_stock" name="new_stock" type="text">
    </div>
     <a href="javascript:void(0)"  class="btn btn-xs btn-green stock_details" title="Product Stock Update">
     <i class="fa fa-edit"></i>
         Stock Update
     </a>
</form>

我的jquery......

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
    $(function () {
        var site_url = $('.site_url').val();
        var stockUpdateForm =  $('.validateForm').each(function(key, form) {
            $(form).validate({
                rules: {
                    new_stock: {
                        required: true,
                        digits:true
                    }
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
        $('.stock_details').on('click', function () {
           if(stockUpdateForm.valid()) {
               // only one form work but another form not working
           }
        })
    })
</script>

注意：当使用提交按钮时它可以正常工作但不能使用点击功能

Answer 1

您的代码...

$('.stock_details').on('click', function () {
    if(stockUpdateForm.valid()) { ....

您只能将 .valid() 方法附加到特定的表单或表单元素，但是您的 stockUpdateForm 不代表任何一种东西。

试试这个。使用 jQuery 的 $(this) 关键字，您可以仅定位所点击按钮周围的相关 form。

$('.stock_details').on('click', function () {
    if($(this).parent('form').valid()) { ....

使用 jQuery 插件的多表单验证通过 onclick 提交而无需提交按钮

Multiple form validation with jQuery plugin submit by onclick without submit button

jquery

jquery-validate