DEV Community


Form Events

・1 min read

Events Inside Forms

Events inside forms are exactly what they read. Its an even that happens by interacting with the inside of a form

Submit Events

Submit events are events in a form that turn in information from it, like a username and password.
there would be a lot of HTML here so am just going to put the JavaScript and explain what the HTML is

const form = document.querySelector('.signup-form')

Enter fullscreen mode Exit fullscreen mode

so all we have right now is that it notices when you submit something but it wont tell you what it submits because it reloads
so lets make it not reload were also going to make it store a username from the form

const form = document.querySelector('.signup-form');

const username = document.querySelector(#username);

form.addEventListener('submit', e=> {e.preventDefault});
Enter fullscreen mode Exit fullscreen mode

so as I said this code will now save the username and not reload the page which the e.preventDefault will do (for not reloading) and the username const saves the username
we can see what the username is by just typing

Enter fullscreen mode Exit fullscreen mode

Testing RegEx Patterns

now we're going to learn how to use patterns to make sure the usernames are correct
so lets make a pattern to make it so that you cant add special characters and it has to be a certain number of letters long

const pattern = /[a-z] [6,]/
let result = pattern.test(username)
Enter fullscreen mode Exit fullscreen mode

this will make the pattern saying it needs to only be letters and have more than 6

Discussion (0)