Лучший способ обработать представление и константы только для помощника в направляющих

У меня была довольно сложная ситуация, когда мне нужно несколько кнопок отправки для обработки разных вещей. Например, «Сохранить и удалить».

Основа была в том, что она также была ненавязчивой, поэтому я не мог просто сделать ее обычной кнопкой. Но также хотелось использовать проверку html5.

Также событие отправки было переопределено в случае, если пользователь нажал enter, чтобы запустить ожидаемое представление по умолчанию; в этом примере save.

Вот как мы работаем с обработкой формы, которая все еще работает с / без javascript и с проверкой html5, с моментами отправки и нажатия.

jsFiddle Demo - проверка HTML5 с помощью переопределения submit и click

blockquote>

xHTML

    
    Save
    Delete

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Предостережение по использованию Javascript заключается в том, что по умолчанию браузер должен по умолчанию распространяться в событие отправки, ДОЛЖНО появляться, чтобы отображать сообщения об ошибках без поддержки каждого браузера в вашем коде. В противном случае, если событие click переопределено event.preventDefault () или возвращает false, оно никогда не будет распространяться на событие отправки браузера.

Следует отметить, что в некоторых браузерах не будет запускаться форма отправки, когда пользователь нажимает enter, вместо этого он запускает первую кнопку отправки в форме. Следовательно, есть console.log ('form submit'), чтобы показать, что он не запускается.