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

JavaScript validation Sign Up form