JavaScript validation Sign Up form
I hope you are having a good day. Your love inspires me to do better. Today I have come up with a JavaScript validation Sign Up form in this tutorial. When you miss filling up a field, a popup message appears in the window.
Step 1
Create the HTML structure: First, create an HTML file and add the structure for the form. You can use the <form> element to wrap the form, and the various form elements (e.g., <input>, <label>, <button>) to create the form fields and submit button. Here’s an example of the HTML structure:
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Validation Sign Up form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">Sign Up</button>
</form>
</body>
</html>
Step 2
Add the CSS styles: Next, add the CSS styles to define the layout and appearance of the form. You can use the display, width, height, and other properties to control the size and appearance of the form fields, and use the transition property to add animation effects. You can also use the :focus pseudo-class to add focus effects, such as changing the background color or adding a border. Here’s an example of some basic CSS styles:
CSS
*{
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
background: #ebecf0;
}
.container{
box-shadow: -5px -5px 10px #fff,
5px 5px 10px #babebc;
border-radius: 10px;
}
form {
display: flex;
background: #ebecf0;
flex-direction: column;
align-items: center;
width: 320px;
padding: 10px;
border-radius: 10px;
}
form input,
form button {
width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 10px 0;
padding: 0 10px;
transition: all 0.2s ease-in-out;
}
form input{
box-shadow: inset 7px 2px 10px #babebc,
inset -5px -5px 12px #fff;
}
form input:focus,
form button:focus {
outline: none;
border: 1px solid #333;
box-shadow: 0 0 5px #333;
}
form button {
background-color: #333;
color: #fff;
font-size: 16px;
cursor: pointer;
}
Step 3
Add the JavaScript code: Finally, you can add some JavaScript code to handle the form submission and validate the form data. You can use the addEventListener() function to attach an event listener to the form’s submit event and use the preventDefault() function to prevent the form from being submitted until the data is valid. You can also use the form.elements property to access the form fields and check their values. Here’s an example of the JavaScript code:
JavaScript
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var name = form.elements.name.value;
var email = form.elements.email.value;
var password = form.elements.password.value;
if (!name || !email || !password) {
alert('Please Fill Out All Fields');
} else {
form.submit();
}
});
</script>
For More Tutorials Please Click Here
7 comments
The sources you offered in the end of the blog post were incredibly practical. Many thanks for going above and beyond.
Excellent goods from you, man. I have understand your stuff previous to and you are just extremely wonderful. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it smart. I can not wait to read much more from you. This is really a terrific web site.
Hi there! This post could not be written much better! Reading through this post reminds me of my previous roommate! He constantly kept talking about this. I’ll forward this information to him. Fairly certain he will have a great read. Thank you for sharing!
Cool + for the post
interesting post
I’m now not sure the place you’re getting your info, however good topic. I must spend a while learning much more or understanding more. Thank you for wonderful info I used to be looking for this info for my mission.
Thanks, +