表單插件可一次提交所有表單

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調用

$('#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調用

$('#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

代碼巨大，因此在發布時，源位於此處

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

筆記

您會在#addSlipForm js call下看到onSubmit為空，這是因為我尚未提交響應函數，但是您也可以看到我的困惑之所在。 因此，它顯然與實際提交本身無關。 這是在提交之前要做的事情，這是顯而易見的，但我認為我在此明確聲明了相關性。

編輯

這是到小提琴的鏈接，該提琴按照請求http://jsfiddle.net/8bh0nv76/1/復制了此問題

Answer 1

這里的問題是，您將在插件內部全局創建一個名為selectors的數組，並且只有一次-將插件插入頁面時。 然后，當有人調用validator方法（以初始化您的插件）時，將選擇器推入此Array，並將其用於代碼中的幾乎所有內容，包括onSubmit 。

因此，您將面臨很多問題，因為您沒有創建某個構造函數的實例，而每次有人為其他選擇器初始化您的插件時，您都應該創建該實例（其中包含所有特定的屬性）。

變量_defaults有一個相同的問題，您也要全局聲明。

Kevin B解決了selectors問題（謝謝！），看一下： http : //jsfiddle.net/8bh0nv76/2/