2017-10-25 19 views
0

この問題の解決策を現在2日間探しています。VueJS/Semantic UIにフォームを送信しないようにする

マイフォームのHTMLは、私は、問題の原因を特定しようとしているが、そうすることができていない

<form id="quote_form" action="" method="get" class="ui large form"> 

、フォームで入力されたテキストフィールド

<input v-model="city" type="text" name="quote[city]" id="city"> 

で定義されています。私は、意味的なUIフォームのキーボードショートカットの設定をオフにしてみました:

$('.ui.form').form({ 
    keyboardShortcuts: false 
}); 

私もキー入力し、これらの方法で提出する機能をトリガすることを防ぐ上書きしようとしています

$('#quote_form').on('keyup keypress', function(e) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 13) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    return false; 
    } 
}); 

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13; 
}); 

$('#quote_form').bind('keypress keydown keyup', function(e){ 
    if(e.keyCode == 13) { e.preventDefault(); } 
}); 

フォームそれを埋めるための複数のステップがあります。各ステップでボタンを使用して次のステップに進むことができます。 enterを押すと、フォームの最初のステップ/タブにリダイレクトされます。リダイレクトされない唯一のケースは、現在のステップのルールが満たされていない場合です。フォームの送信は、送信ボタンで処理されます。このボタンでは、フォーム自体を検証して送信するメソッドが呼び出されます。送信動作の入力と送信ボタンとの間には何の関係もありません。

原因を特定するのに役立つ情報が不足している場合は、お知らせください。私はここで質問をするのは初めてです。私の質問ができるだけ悪いとみなされないようにしたいと思っています。

+0

あなたが入力にキー入力を防ぐために必要があります、フォーム上ではありません。 – n00dl3

答えて

1

入力マークアップの最後に@keyup.enter.preventを使用してください。ちなみにVueJS Doc

を参照してください、あなたの代わりに、すべてここでjQueryの

0

でそれをやり直すのネイティブVueJSイベントを使用してみてくださいあなたのためのソリューションです: @submit.prevent https://jsfiddle.net/4qpffycs/2/

関連する問題