Form Validation Easy Using HTML And CSS Only

Many people still have the opinion that form verification in web programming should be done with JavaScript and only JavaScript can do it Well, however, this is not entirely correct because from the beginning HTML has had extremely powerful attributes that take on this role and CSS can also easily control those verification results. So why  use JavaScript? user enters data in the form, we will need to validate at this point on the front end, with two options, HTML and CSS or using JavaScript, then proceed to send the data to the  server. During this process, if the user wants to cheat by sending invalid data to the server, no matter what method you use, you cannot prevent this behavior. So, it is not true to say that using JavaScript is safer.

That is why normally the data after being sent to the server will have to be validated again before being put into use. In fact, using only HTML and CSS is much better and simpler than using JavaScript. JavaScript will only really be suitable for complex validations that HTML does not support, project specific logic, or needing to send more data than what is displayed on the screen.

In this video, I will use HTML and CSS to guide everyone to validate the login form very simply with the requirements of entering the correct email. The password must be at least 6 characters.

And if it is not entered correctly, it is completely impossible to click on the button to send data to the server. From there, everyone can apply it to any form that everyone wants.

Here I have a login page. It includes an input for email information, an input for password, and a submit button to proceed with the login.

I will move the attributes down into different rows to make it easier for people watching the video in the initial state when validations have not been processed of course after clicking submit the data will be sent immediately but obviously in a login form email and password are two required fields so in these two fields just add required at the end.

At this time if the user clicks submit without entering data, the browser will immediately report an error, until both fields have entered content. Then the data will continue to be sent. In addition, if you want the field that the user just entered to be an email, you just need to change the type of text to the type of email. Then the browser will not only require this field to be entered, but this field must also be a valid email.

Do you see?

Obviously, validations with HTML are too simple but also very effective. The biggest obstacle here is how to customize and edit these error warnings to your liking and design with CSS without using JavaScript. In CSS,  there is a pseudo class called invalid. This is a pseudo class used to identify which element  has failed validation in HTML. And you can easily mark it with any CSS property.

For example, for any invalid input, I will change the border color to red.

Both of these inputs are required so they will be red by default. After entering the content for the password, it will lose its red color. As for email, not only must a value be entered, but the value entered must be a valid email. Similarly, I continue to add some background related properties to emphasize the error warning.

With a pre-prepared image, I will move it 100%  left then just subtract 10 pixels to create the gap with the right margin if the pseudo class  invalid in CSS is used to mark fields that have failed validation then the pseudo class valid will have the opposite effect it will mark valid fields which can be fields that have  been validated or do not need validation.

For example, for valid cases, I will use a green check background icon to indicate to the user that they have entered the correct value. As you can see, it works very smoothly. The warning effect changes based on  whether the input value is valid or not. In this example, both invalid and valid cases, I use quite similar background properties.

So, the ones that are similar, I will list here to avoid duplicate code, but you know what this doesn’t satisfy me we can already see that these CSS pseudo classes can affect themselves but in design sometimes we have to affect other HTML elements as well let’s look at an example in passwords we can have higher requirements. For example, the user’s password must be at least 6 characters. Then the invalid pseudo class will automatically work with the condition that it is at least 6 characters. But to make the user aware of this requirement, we must create a text with the content of this requirement.

This is a separate element that has nothing to do with the input, right?

But what if I want the user to enter an incorrect password? This text must be highlighted in red to emphasize the requirement about validations.

In this case, first use the invalid pseudo class on the input, then use the plus sign and the p tag. This p tag is  our text below. This sentence means that if any field has a validation error it will point  to the first p tag right after it to change the color and of course it will not affect other p tags actually this code still has a problem normally when accessing the page the user  has not entered data then we should not report an error the error content should only appear when the user has entered data but in CSS we will not be able only appear when the user  has entered data.

But in CSS we will not be able to check if the user has entered data directly.  But don’t worry, we have a little trick here. In the input we have a placeholder attribute, used to display a text when the input has not been entered.

For example, here we have the texture email. This placeholder text will disappear when the user enters data.

So that means if we can check the status of the placeholder attribute, we also know the status of whether the user has entered the content or not. Now in places where we are using pseudo class CSS to check validation to display on the screen, I add a condition that the placeholder content of that input has disappeared. Because we know that once the placeholder content disappears, it means the user has entered the content. Now we proceed to edit the CSS to display the corresponding warning. Finally, when there is a failed validation field, I want to block the user from clicking the submit button.

Then it is based on the method with the p tag above.

However, here you will see that it does not work. The plus character will find the p tag right after the invalid input, but with the submit button, it is not necessarily right after. Instead, use this character. This character will also find the submit button after the  invalid input, but not necessarily right next to it.

So this form is perfect. When  there is an invalid input, the submit button will be dimmed and not clickable  until all fields are validated successfully. A small question for you.

Why in this case I  don’t add not placeholder shown like the previous cases? If you have the answer,  please share it with me in the comment section of this video.

Thank you everyone for taking the time  to watch this video, if you find it interesting. Don’t forget to subscribe to the channel and like to continuously update more interesting videos about programming and web design. Thank you.

https://theclickgenerator.com/index.php?r=joseintercallosa36

https://listhoopla.com/commissions.cgi/21719