Prevent form submit on enter VueJS/Semantic UI

Question

Have been searching for a solution to this problem for 2 days now and none of the suggested solutions have worked so far.

My form html is defined with

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

and input text fields in the form

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

I have been trying to isolate the cause of the issue but have not been able to do so. I tried turning off the keyboard shortcuts settings for semantic ui forms:

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

I have also tried to override the enter key and prevent it from triggering the submit function in these ways:

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

The form has multiple steps in filling it in. Each step uses a button to permit the advance to the next step. When enter is pressed then it causes the form to redirect to the first step/tab of the form. The only case where it doesn't redirect is when the rules of the current step are not satisfied. The form submission is handled by a submit button where the button itself calls methods to validate and submit the form. I can't find any connection between enter submit behaviour and the button for submitting.

If I am missing any useful information to help isolate the cause then please let me know. I'm new to asking questions here and want to prevent my question from being considered bad as much as possible :)

You need to prevent the keypress on input, not on the form.

n00dl3
– n00dl3

2017-10-25 22:02:14 +00:00
Commented Oct 25, 2017 at 22:02 — n00dl3
– n00dl3, Commented Oct 25, 2017 at 22:02

Евгений Мартыненко · Accepted Answer · 2017-10-25 23:39:07Z

1

Here is solution for you: @submit.prevent https://jsfiddle.net/4qpffycs/2/

answered Oct 25, 2017 at 23:39

Евгений Мартыненко

1063 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 02:28:28Z

1

Just use @keyup.enter.prevent at the end of the input markup. See VueJS Doc

By the way, you should try to use native VueJS Events instead of all redoing it with JQuery

edited Jul 16, 2022 at 2:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 25, 2017 at 22:03

Plotisateur

50610 silver badges24 bronze badges

Comments

ph0enix · Accepted Answer · 2019-12-11 10:09:04Z

0

The solution I found regards only Semantic UI without VueJS, but should be applicable here and gives a bit of an insight into the issue.

The problem arises from the fact that $("#formId").form({ ... }) registers an event handler for a button press and submitting the form on Enter press if one of the input boxes are selected. This can be seen in Chrome DevTools when selecting the element and choosing Event Listeners category:

The simplest way I found to remove this behavior is to call

$("#formId").unbind('keydown')

to remove the keydown bind completely from the element.

answered Dec 11, 2019 at 10:09

ph0enix

7742 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Prevent form submit on enter VueJS/Semantic UI

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related