Плагин jQuery Validation с двумя кнопками отправки?

У меня есть одна форма с примерно 50 полями и двумя кнопками отправки, "СОХРАНИТЬ" и "СОХРАНИТЬ И ОТПРАВИТЬ". Если пользователь нажимает "SAVE", то проверяйте только некоторые значения, например. поле1, поле2. Когда пользователь нажимает кнопку "SAVE и SUBMIT", он должен проверить все 50 полей и отправить.

<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="text" name="field3" />
    <br/>
    <input type="text" name="field4" />
    <br/>
    <input type="submit" id="button1" value="Save" />
    <input type="submit" id="button2" value="Submit" />
</form>


$(document).ready(function () {

    $('#button1').click(function(){          
        $("#myform").validate({             
            rules: {
                field1: {
                    required: true                         
                },
                field2: {
                    required: true                        
                }
            },
            submitHandler: function (form) { // for demo    
                alert("data saved");
            }
        });
    }); 

    $('#button2').click(function(){
        $("#myform").validate({             
            rules: {
                field1: {
                    required: true                          
                },
                field2: {
                    required: true                           
                },
                field3: {
                    required: true                         
                },
                field4: {
                    required: true                          
                }
            },
            submitHandler: function (form) { // for demo
                alert("data submited");
            }
        });
    });

});

Я создал jsfiddle для этого: пример теста

Ответы

Ответ 1

Ваш код...

$('#button1').click(function(){             
    $("#myform").validate({
        ....
    });             
}); 

$('#button2').click(function(){
    $("#myform").validate({
        ....
    });
});

Вы абсолютно не можете сделать это:

1) Вы не можете вызывать метод .validate() более одного раза на одном и том же form. Любые последующие вызовы всегда игнорируются.

2) Вы не должны использовать метод .validate() внутри обработчика click. Метод .validate() - это метод инициализации плагина и только один раз вызывается один раз в обработчик события готовности DOM. После правильной инициализации щелчок кнопки отправки автоматически захватывается плагином.

Отметки HTML и обработчики кликов:

Этот плагин также автоматически захватывает щелчок любых элементов input type="submit" и button type="submit" и инициирует проверку/отправку.

Итак, если вам нужно контролировать, что происходит для двух разных кнопок, вам сначала нужно сменить свои кнопки на элементы input type="button" или button type="button".

Затем вы можете использовать обработчики click() для динамического изменения правил с помощью методов .rules(), по которым была нажата кнопка. См. документа .rules().

Используйте .submit() для программной отправки. Другими словами, это приведет к проверке проверки и попытается представить форму IF valid... так же, как если бы у вас была кнопка submit.

Используйте .valid() для программной проверки формы. Другими словами, это приведет к проверке проверки, но НЕ отправит форму IF в допустимый.

Пример:

$(document).ready(function () {

    $('#myform').validate({  // initialize the plugin on your form
        // options, rules and/or callbacks
    });

    //  IMPORTANT:  buttons are NOT type="submit"

    $('#button1').on('click', function(){  // capture the click           
        $('#myfield').rules('add', {  // dynamically declare the rules
            required: true,
            email: true
        });
        $('#myOtherField').rules('remove'); // remove the other rules.
        // another '.rules()' call, etc.
        $('#myform').valid();  // trigger the validation & do NOT submit        
    }); 

    $('#button2').on('click', function(){  // capture the click
        $('#myOtherField').rules('add', {  // dynamically declare the rules
            required: true,
            digits: true
        });
        $('#myfield').rules('remove'); // remove the other rules.
        // another '.rules()' call, etc.
        $('#myform').submit();  // trigger the validation & submit     
    });

});

Рабочий DEMO: http://jsfiddle.net/Kt93M/

Демо - это просто ваш оригинальный jsFiddle с использованием этих принципов.