How to intercept HTML5 input validation with JavaScript?

Question

<form ... onsubmit="return false">
   <input type="text" name="location" ...>
   <input type="url" ... required>
   ...
</form>

Now, if I enter a location and hit ENTER, the browser tells me that an URL is required which is not an expected or desired outcome. The ENTER should just be ignored.

Question

How can I prevent the browser from checking the required field after hitting ENTER in the "location" input field and only let the browser check the "url" field when submitting the form with JavaScript using form.submit()?

Mazzu · Accepted Answer · 2014-03-05T15:13:27.857

2

You need to stop the default behavior of enter button for your form elements.

Lets have an example:

HTML5 form as

<form id="form">
  <input type="text" name="test1" id="test1" required/>
  <input type="text" name="test2" id="test2" required/>
  <input type="submit" value="Test"/>
</form>

Then apply below code

$(document).ready(function() {
  $(form).find('input').on('keydown', function(e){
     if(e.which == 13) // KEY.ENTER = 13
       e.preventDefault();
  });
});

Based on above scenario, here is the fiddle.

edited Mar 05 '14 at 15:13

answered Mar 05 '14 at 14:35

Mazzu

2,799
20
30

I actually did this now but reduced the scope to the input fields in the form. – Simon Ferndriger Mar 05 '14 at 14:43
Simon, do I change my answer accordingly? – Mazzu Mar 05 '14 at 14:57
Simon, are you fine with the answer? Then it should be ready for the acceptance :) – Mazzu Mar 05 '14 at 15:00

score 1 · Answer 2 · edited Jun 16 '21 at 22:30

1

You can use the novalidate attribute in your form element:

<form method="post" action="..." novalidate>...</form>

edited Jun 16 '21 at 22:30

Pawel Veselov

3,996
7
44
62

answered Mar 05 '14 at 14:38

José Barbosa

913
8
17

Thanks, however, I want to validate, but not on ENTER – Simon Ferndriger Mar 05 '14 at 14:46

score 1 · Answer 3 · answered Mar 05 '14 at 14:44

1

This is what I did now and what worked (using jQuery, where $form represents the ):

$form.find('input').on('keydown', function(e){
    if(e.which == KEY.ENTER) // KEY.ENTER = 13
        e.preventDefault();
});

answered Mar 05 '14 at 14:44

Simon Ferndriger

4,455
6
28
53

Use `which` instead of `keyCode` in order to always work properly, since it is a jQuery standardization: http://api.jquery.com/category/events/event-object/ – Simon Ferndriger Mar 05 '14 at 14:48
Simon, it will works fine for all the inputs. Have a look at my fiddle http://jsfiddle.net/Mazzu/hY93D/40/ for the same – Mazzu Mar 05 '14 at 14:54

score -2 · Answer 4 · answered Mar 05 '14 at 17:07

-2

There is a specific method for handle a "submit". Here's here!

answered Mar 05 '14 at 17:07

Machado

7
2

How to intercept HTML5 input validation with JavaScript?

Question

4 Answers4