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()) { ....

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

1 个答案: