- FORMZ JAVASCRIPT VALIDATION FOR MODX HOW TO
- FORMZ JAVASCRIPT VALIDATION FOR MODX CODE
- FORMZ JAVASCRIPT VALIDATION FOR MODX PASSWORD
SubmitButton.addEventListener('click', function(event) )įor now, we’re going to skip functions other than “validateState”. The function submits the formĬonst submitButton = document.getElementsB圜lassName('js-submit-user') Let’s focus on writing our function that is going to submit the form. Our “loginForm” variable has assigned our form, where we’ve got our inputs and button. In brief, our “validationState” is a new set which is uniquely storing our input names and acts as our state.
FORMZ JAVASCRIPT VALIDATION FOR MODX CODE
We’re going to need those lines of code while writing additional functions.
Which means that event listener is attached to our button straightaway.įirstly, we’re going to add two lines of code at the top of our file. This function is initializing when we open the page. We’re going to kick off this part from creating a submit form function in our “validation.js” file. Great, I have explained an HTML part, let’s go to the most important one – JavaScript code. So we know then that we can find this functionality by looking for “js-submit-user” class in our JS code. Why? It implies that this button has a JavaScript functionality attached to itself. We’re going to use our “btn” class as a root class for our button and “btn-2” class is going to be our extension of this class.Īnother exciting approach I started using some time ago is naming classes by adding “js” at the beginning of the name. I suspect that you already know what “btn” and “btn-2” class does. This button is going to submit our form to the server. The last element in the form is a button. Our “group” class is going to help us to separate those two inputs and its labels from each other. Inside of the form, we’ve got two divs having classes named “group”.
In our body, we’ve got the form element that has a class named “form-1”, and it uses the “POST” method to send the data to the server. I don’t think there is something more to explain in this step, but let me go through it quickly.
FORMZ JAVASCRIPT VALIDATION FOR MODX PASSWORD
The password has to consist of one upper case letter, one number and one special character.Ībove you can see our simple HTML code. Username is too short or contains special characters. If you want to use webpack for it and use code splitting, go ahead, it is welcomed because that’s what I’d do.
FORMZ JAVASCRIPT VALIDATION FOR MODX HOW TO
We’re going to create our simple validation system in one file to show you and give you an idea on how to create a simple form validation mechanism.
In this tutorial, I’m not going to show you how to configure and set-up webpack and how to import other files. It is going to be a tutorial, step by step introduction to building a custom form validation system. In this blog post, I’m going to walk you through a validation system written in pure JS. I don't want to write a too-long post, I'd like to jump straightaway to the point, but also, I'd like to give you an understanding of why validation management on our forms is essential. I believe that creativity is one of the best parts of being a developer, actually I do not believe it only, I feel it as well. I've been implementing lately a validation management system on the forms.
0 kommentar(er)
