Использование обработчика отправки формы в jQueryMobile для проверки, но предотвращение отправки - PullRequest
Новая
       12

Использование обработчика отправки формы в jQueryMobile для проверки, но предотвращение отправки

1 голос
/ 08 марта 2012

Я создаю приложение в jQueryMobile и PhoneGap.У меня есть подход к проверке форм, который хорошо работает при тестировании в Chrome и на моем телефоне Nexus S Android, но я не уверен, что он будет работать на всех устройствах.

Это ситуация:

У меня есть несколько простых форм.Данные, которые вводит пользователь, хранятся локально.Поэтому мне не нужны запросы POST или GET (на самом деле, я хочу избежать их, как чумы).Я мог бы просто создать несколько входов и кнопку и добавить к ней обработчик щелчков, чтобы все работало хорошо.

За исключением того, что мне действительно нравятся средства проверки формы HTML5.И эта проверка только (в основном) происходит, когда в форме запускается событие submit.Поэтому я решил поместить входные данные и кнопку внутри элемента формы, сделать одну кнопку кнопкой отправки и прослушать событие отправки, запускаемое в форме.Другой подход (показанный здесь для кнопки «Удалить») заключается в том, чтобы просто прослушивать нажатие кнопки, не используя процесс отправки.В конце концов, если пользователь хочет удалить элемент, нет необходимости проверять форму (в любом случае, в моем случае). 

<form id="oneExpenseForm" action="javascript:void(0);" method=''>
    <button type="submit" id="submitExpense">Save</button>
    <button id="deleteExpense">Delete</button>
</form>

<script>
    $('#oneExpenseForm').on('submit',function(){
        submitExpense();//This function takes care of everything I want
    })
</script>

Кажется, это работает нормально.Я также попытался установить действие формы по-другому: 

<form id="oneExpenseForm" action="submit" method=''>

Но это заставило браузер запустить GET-запрос, который вызывает перезагрузку страницы (что очень плохо и нежелательно при работе с jQueryMobile).

Что меня беспокоит, так это то, что в некоторых браузерах я могу настроить систему на сбой.В конце концов, некоторые браузеры могут видеть этот атрибут действия ... 

  action="javascript:void(0);"

... как причину вообще не запускать событие submit.Это было бы плохо, так как мне нужно запустить событие submit для проверки и

Я принимаю здесь ненужные риски?Или все браузеры запускают событие submit, даже если для действия формы установлено значение null, void и т. Д.?

Еще одна вещь: я, конечно, мог бы просто указать ... 

action="javascript:submitExpense();"

... в файле HTML.Но это то, чего я хочу избежать, так как я защищаю свой код Js с помощью обфускации.Это включает в себя изменение имен функций на нечитаемый код, такой как aR3df ();используя специальную часть программного обеспечения.Я бы предпочел не искать загроможденные имена и вводить их в HTML каждый раз, когда я публикую обновление.

РЕДАКТИРОВАТЬ: После того, как пришел первый ответ с использованием e.preventDefault (), и это не сработало, я подумал, что может быть уместно связать обработчик события submit внутри другой функции.Это потому, что jQueryMobile хочет, чтобы вы выполняли пользовательскую обработку только после инициализации «страницы».В предыдущих версиях jQuery не было возможности использовать связыватель .live () в других функциях.Но это тоже не проблема.Даже когда я связываю обработчик способом ".live ()", используя новое связующее .on () ... 

$(document).on('pageinit','#oneExpensePage',function(event){
    $('#oneExpenseForm').on('submit',function(){
        submitExpense();//This function takes care of everything I want
    })
})

... перезагрузка страницы (то есть отправка формы) сохраняется.

1 Ответ

0 голосов
/ 08 марта 2012

Оставить действие пустым action="" и предотвратить действие по умолчанию для события при отправке: 

<script>
$(function() {
    $('#oneExpenseForm').on('submit',function(e){
        e.preventDefault();
        submitExpense();
    });
});
</script>
...