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-05 15:13:27Z

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 5, 2014 at 15:13

answered Mar 5, 2014 at 14:35

Mazzu

2,84922 silver badges30 bronze badges

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

3 Comments

Simon Ferndriger Over a year ago

I actually did this now but reduced the scope to the input fields in the form.

Mazzu Over a year ago

Simon, do I change my answer accordingly?

Mazzu Over a year ago

Simon, are you fine with the answer? Then it should be ready for the acceptance :)

Simon Ferndriger · Accepted Answer · 2014-03-05 14:44:54Z

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 5, 2014 at 14:44

Simon Ferndriger

5,1106 gold badges35 silver badges64 bronze badges

2 Comments

Simon Ferndriger Over a year ago

Use which instead of keyCode in order to always work properly, since it is a jQuery standardization: api.jquery.com/category/events/event-object

Mazzu Over a year ago

Simon, it will works fine for all the inputs. Have a look at my fiddle jsfiddle.net/Mazzu/hY93D/40 for the same

Pawel Veselov · Accepted Answer · 2021-06-16 22:30:42Z

1

You can use the novalidate attribute in your form element:

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

edited Jun 16, 2021 at 22:30

Pawel Veselov

4,2738 gold badges49 silver badges71 bronze badges

answered Mar 5, 2014 at 14:38

José Barbosa

9038 silver badges17 bronze badges

1 Comment

Simon Ferndriger Over a year ago

Thanks, however, I want to validate, but not on ENTER

Machado · Accepted Answer · 2014-03-05 17:07:42Z

-2

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

answered Mar 5, 2014 at 17:07

Machado

72 bronze badges

Collectives™ on Stack Overflow

How to intercept HTML5 input validation with JavaScript?

Question

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related