Question

最近我创建了一个表单验证插件的插件。它有几个不同的选项，其中一个是onSubmit。 onSubmit选项会覆盖您的正常提交功能，并阻止任何默认操作，允许它适用于ajax调用。我今天遇到的是，当我在同一页面上有多个实例时，它会尝试一次提交所有实例，即使我没有按下他们的提交按钮。我想，因为我为每个实例使用this关键字，这不会有问题。我显然错了。现在我不知道如何处理这个问题，以及如何让它只适用于我当时正在使用的实例。

以下是该插件的完整代码。以及我正在使用的表单示例。我非常困惑，真的需要一些帮助来找出解决方案。

形式

<form id='addSlipForm'>
    <section class='form-group col-xs-2'>
        <input type='text' class='form-control' id='trip' placeholder='Trip'/>
    </section>
    <section class='form-group col-xs-2'>
        <input type='text' class='form-control' id='trip_date' placeholder='Trip Date'/>
    </section>
    <section class='form-group col-xs-2'>
        <input type='text' class='form-control' id='facility' placeholder='Facility'/>
    </section>
    <section class='form-group col-xs-2'>
        <input type='text' class='form-control' id='minutes' placeholder='Minutes Late'/>
    </section>
    <section class='form-group col-xs-2'>   
        <div class='input-group bootstrap-timepicker timepicker'>
            <input type='text' class='form-control' id='scheduled_arrival' placeholder='Scheduled Arrival'>
            <span class='input-group-addon'><span class='glyphicon glyphicon-time'></span></span>
        </div>
    </section>
    <section class='form-group col-xs-2'>
        <section class='btn-group'>
            <button type='submit' class='btn btn-primary'>Add</button>
            <button type='button' class='btn btn-info'>Add and New</button>
            <button type='reset' class='btn btn-danger'>Clear</button>
        </section>
    </section>
</form>

<form id='searchBar' class='navbar-form navbar-right'>
    <section class='form-group'>
        <input type='text' class='form-control' id='contract' placeholder='Contract #'/> 
    </section>
    <section class='form-group'>
        <input type='text' class='form-control' id='startDate' placeholder='Start Date'/> 
    </section>
    <section class='form-group'>
        <input type='text' class='form-control' id='endDate' placeholder='End Date'/> 
    </section>
    <button type='submit' class='btn btn-primary'>Filter Slips</button>
</form>

#searchBar js call

$('#searchBar').validator({
    controls : {
        contract : {
            validate : 'notEmpty'
        },
        startDate : {
            validate : 'isDateTime',
            dateFormat : 'm/d/Y'
        },
        endDate : {
            validate : 'isDateTime',
            dateFormat : 'm/d/Y'
        }
    },
    onSubmit : function(){
        var contract__id = $('#searchBar').find('#contract').val();
        var start_date = $('#searchBar').find('#startDate').val();
        var end_date = $('#searchBar').find('#endDate').val();
        koolajax.callback(getLateSlipTable(contract__id, start_date, end_date), function getLateSlipTableDone(response){
            if(!response.errors){
                $('#main').removeClass('hidden');
                $('#contractName').data('id', response.contract__id);
                $('#contractName').html(response.contract);
                $('#lateSlipTable > tbody').html(response.table_rows);
            }else{
                bootbox.alert(response.error_message);
            }
        });
    }
});

#addSlipForm js call

$('#addSlipForm').validator({
    controls : {
        trip : {
            validate : 'notEmpty'
        },
        trip_date : {
            validate : ['notEmpty', 'isDateTime'],
            dateFormat : 'm/d/Y'
        },
        facility : {
            validate : 'notEmpty'
        },
        minutes_late : {
            validate : ['notEmpty', 'isDigit']
        },
        scheduled_arrival : {
            validate : 'notEmpty'
        }
    },
    onSubmit : function(){


    }
});

validator.js

代码很大，所以在leu发布时，源位于此处

https://github.com/MarkHill89/validator/blob/master/validator.js

备注

你会在#addSlipForm js call下看到onSubmit是空白的，那是因为我还没有提交响应函数，但你可以看到我的混乱来自哪里也是如此。所以它显然与实际提交本身无关。这是在提交之前正在进行的事情，这是显而易见的，但我认为我在这里明确说明它的相关性。

修改

以下是根据要求复制此问题的小提琴的链接 http://jsfiddle.net/8bh0nv76/1/

Answer 1

这里的问题是你在插件中全局创建一个名为selectors的数组，只有一次 - 当插件插入页面时。然后，当有人调用validator方法（初始化您的插件）时，您将选择器推入此数组，并将其用于代码中的几乎所有内容，包括onSubmit。

所以，你将面临很多问题，因为你没有创建一个你应该创建的构造函数的实例（其中包含所有特定的属性），每次有人为其他选择器初始化你的插件。 / p>

变量_defaults也存在同样的问题，你要全局声明。

Kevin B解决了selectors问题（谢谢！），看看：http://jsfiddle.net/8bh0nv76/2/

表单插件一次提交所有表单

1 个答案: