CODEWITHSUNDEEP
javascriptjqueryformsvue.jssemantic-ui
Alex F
Alex F

Reputation: 51

Prevent form submit on enter VueJS/Semantic UI

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 :)

Upvotes: 2

Views: 5416

Answers (3)

Plotisateur
Plotisateur

Reputation: 506

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

Upvotes: 1

ph0enix
ph0enix

Reputation: 774

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:

enter image description here

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

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

to remove the keydown bind completely from the element.

Upvotes: 0

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

Reputation: 106

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

Upvotes: 1

Related Questions