Prevent bootstrap form to submit with "Enter"

Question

I cannot prevent the form from submitting when the user presses the ENTER key on an input. I found this way but I have some tag inputs that need to trigger the ENTER key to allow for free values.

Here is a snippet with the code.

Q: How can I prevent the ENTER key to submit my form without breaking the taginputs ?

Q+ : can someone explain me why $event.keyCode == 13 in my preventSubmitOnKey function, whereas it is undefined in my submitForm function ?

$(document).ready(function() {
  // I can not use that
  //$('#myForm').on('keydown', preventSubmitOnKey);
  
 $('#myForm').on('submit', submitForm);
});

function preventSubmitOnKey($event) {
 console.log('key pressed!', $event.keyCode); // show 13 on 'ENTER'
 if ($event.keyCode == 13) {
  $event.preventDefault();
 }
}

function submitForm($event) {
 let invalidForm = false;
 $event.preventDefault(); // Don't refresh the page
  console.log('key', $event.charCode, $event.keyCode); // show 'undefined' ..
 let key = $event.charCode || $event.keyCode || 0;
 if (key == 13) {
  $event.stopPropagation();
  return;
 }

 const $form = $(this);

 $form.addClass('was-validated');

 if (!this.checkValidity()) {
  $event.stopPropagation();
  return;
 }

 // some other process...

 const data = {
  client: $form.find('#clientList').val(),
  firstname: $form.find('#contactFirstname').val(),
  lastname: $form.find('#contactLastname').val(),
 }

 console.log('Submitting', data);
 // call my own API
}

/**
 * up/down arrow devant les collapse
 */
[data-toggle="collapse"] .fas:before {  
  content: "\f139";
  margin-right: 5px;
}

[data-toggle="collapse"].collapsed .fas:before {
  content: "\f13a";
}

/**
 * Override Bootstrap CSS : ".btn" et "button"
 * -> text-align: center;
 */
legend>[data-toggle="collapse"] {
 text-align: left;
 width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.min.css" integrity="sha256-4w9DunooKSr3MFXHXWyFER38WmPdm361bQS/2KUWZbU=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>


<form id="myForm" novalidate="novalidate">
 <fieldsed class="contactInfo">
  <legend>
   <button class="btn actilan-test" type="button" data-toggle="collapse" data-target="#contactCollapse" aria-expanded="true" aria-controls="contactCollapse"><i class="fas" aria-hidden="true"></i>Contact</button>
  </legend>
  <div class="collapse show" id="contactCollapse" data-parent="#myForm">
   <div class="input-group input-group-sm mb-1">
    <div class="input-group-prepend"><span class="input-group-text" id="clientListLabel">Client</span></div>
    <select class="custom-select" id="clientList" name="client" aria-describedby="clientListLabel">
     <option value="1">One</option>
     <option value="2" selected="selected">Two</option>
    </select>
    <div class="input-group-append">
     <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton">Mode</button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <button class="dropdown-item" type="button" id="btnAuto" disabled="disabled">Auto</button>
      <button class="dropdown-item" type="button" id="btnManuel">Manuel</button>
     </div>
    </div>
   </div>
   <div class="input-group input-group-sm mb-1">
    <div class="input-group-prepend"><span class="input-group-text" id="contactFullnameLabel">Nom et Prénom</span></div>
    <input class="form-control" type="text" id="contactFirstname" name="contactFirstname" aria-label="Contact firstname" aria-describedby="contactFullnameLabel" placeholder="Prénom" required="required">
    <input class="form-control" type="text" id="contactLastname" name="contactLastname" aria-label="Contact lastname" aria-describedby="contactFullnameLabel" placeholder="Nom" required="required">
    <div class="input-group-append">
     <button class="btn btn-danger" type="button" id="btnCancelContact"><i class="fas fa-user-minus"></i></button>
    </div>
    <div class="invalid-feedback">Ce champ doit contenir une valeur</div>
   </div>
  </div>
 </fieldsed> 
  <button class="btn btn-success mb-3" type="submit" id="btnSubmit" value="Submit!">Envoyer</button>
</form>

Submit events don't send a `KeyboardEvent` to the event handler function -- that's why there are no keyboard-specific event data available. And there's no way to get it to show up there. You have to attach your `preventSubmitOnKey` to the `keydown` event of all of your inputs. — Heretic Monkey, Dec 27 '19 at 16:35
you need a code to only prevent enter from submit ? like: $(document).ready(function(){$(window).keydown(function(event){if(event.keyCode == 13){event.preventDefault();return false;}});}); — NoobDEV-GBL, Dec 27 '19 at 16:39
did you try to put the console.log inside preventSubmitOnKey(event) before prevent default? — NoobDEV-GBL, Dec 27 '19 at 17:19

score 3 · Answer 1 · answered Jan 07 '20 at 09:59

3

You can add key event to prevent from submit on enter button press

$("form").keypress(function(e){
    if(e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
})

answered Jan 07 '20 at 09:59

Nikhilesh Agrawal

223
1
6

Prevent bootstrap form to submit with "Enter"

1 Answers1

Linked