Prevent bootstrap form to submut with "Enter" : I can not prevent the form to submit if the user press `ENTER` on an input. I found [that way](https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) but I have some taginputs that need to trigger the `ENTER` key to allow free values.

Here is a snippet with the code.

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

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

Thanks a lot in advance!

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

    $(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
    }

<!-- language: lang-css -->

    /**
     * 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%;
    }

<!-- language: lang-html -->

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

<!-- end snippet -->

