How to Do Form Validation Without JavaScript

365 Days of CodingFront End ChallengeFront End

Jan 26

Happy day 10 of 365 Days of Coding! Today is day 3 of a 4 day series on creating a sign up form! This form can have any input but you must require, first name, last name, phone number and email. It should also have a section for OAuth (allow for sign in with Facebook, Google, etc.). The phone number must be formatted. It will also have validation for the email and phone number. Since this is more than just 1 function I am going to create a Github repository for it. Every day will be a branch and each day the branch will be merged into master so master will eventually have the final solution but each day will still be broken out if you want to see my solution for each day as well. Here is the link to the repository I will also link it below.

If you would like me to do a post on Github and how to use it let me know I am happy to do so!

Disclaimer: there are MANY ways to solve this challenge this is just my version of this challenge

TLDR: Solution is at the bottom of the post

Repo for this series: https://github.com/hellodevworldblog/SignUpForm

To test your code all your have to do is go to the folder where the index.html document created is and double click it. It will open a web browser with your code. To see changes you have made save the file and refresh that page.

The Problem

Format the phone number and add validation for the email and phone number fields. If they do not pass validation the form should not submit and you should show error messaging

The Solution

First things first we need to format the phone number. You can do this every key stroke but I am just going to do this on blur of the input. If you want to better understand how this is working please check out my blog post on how to format a phone number as this is taken from there. The JavaScript function is going to look like this. You can definitely make this more involved and add formatting as they type or error if it doesn’t match to help but this is a very basic way of doing it.

const phoneFormat = (input) => {
  if (input && !isNaN(input)) {
    if (input.length === 10) document.getElementsByName("phoneNumber")[0].value = input.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
  }
}

We have to update our input to call this function on blur.

<input type="text" name="phoneNumber" onblur="phoneFormat(this.value)" class="formInput" placeholder="Phone Number" required />

For the validation you can definitely do it with JavaScript. However HTML has a nifty attribute on their input tags called pattern. Pattern takes a regex statement that the input must match to pass validation on a form submit. For our phone number validation since we are going to be formatting the phone number we are going to require the format. This is good practice as your backend will likely require a certain format and you want to make sure it is the right format before submitting the data. My phone number input now looks like this:

 <input type="text" name="phoneNumber" onblur="phoneFormat(this.value)" pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$" class="formInput" placeholder="Phone Number" required />

We are going to the same thing for the email validation but the regex will be a little different.

<input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" class="formInput" placeholder="Email" required/>

Our form now formats the phone number and validates the email and phone number. this is what my HTML looks like. I didn’t change the styling if you missed that and would like the styling for the form it is in this post.

If you are curious what the whole index.html file is now this is what it looks like:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    <title>Sign Up Form</title>
</head>
<body>
    <div class="formContainer">
        <div class="leftSide">
            <h2 class="formHeader">Sign Up!</h2>
            <div class="formContentContainer">
                <form>
                    <input type="text" name="firstName" class="formInput" placeholder="First Name" required/>
                    <input type="text" name="lastName" class="formInput" placeholder="Last Name" required/>
                    <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" class="formInput" placeholder="Email" required/>
                    <input type="text" name="phoneNumber" onblur="phoneFormat(this.value)" pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$" class="formInput" placeholder="Phone Number" required />
                    <input type="submit" class="submitButton" name="submitButton" value="Sign Up">
                </form>
            </div>
        </div>
        <div class="rightSide">
        </div>
        <div class="orCircle">or</div>
    </div>
  </body>
</html>

<script>
    const phoneFormat = (input) => {
        if (input && !isNaN(input)) {
            if (input.length === 10) document.getElementsByName("phoneNumber")[0].value = input.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        }
    }
</script>

I hope you had fun with this one! Please leave your repo links to your form in the comments section. Also let me know if you like the multi day challenges or really hate them! If you have any challenge you would like to see done also leave that in the comments below you may see it come up! If you would like to get the challenge emailed to you every day in morning and a notification when the solution is posted subscribe below.

365 days of codingday 10 of 365 days of codingday 10day 10 challengefrontend challengebeginner developer challengebeginner developer interview questionbeginner frontend challengedeveloper interview questionjunior developer interview questionsjunior frontend challengeHow to Add Email and Phone Number Form Validation JavaScriptformat phone numberformat phone number javascriptphone number formatterphone number formatter solutionphone number formatter javascript solutionphone number validationphone number validation javascriptphone number validation javascript solutionjavascript phone number validationemail validationemail validation javascriptemail validation javascript solutionphone number and email validation javascriptbeginner javasctriptbeginner javascript challegejavascriptjavascript challengedeveloper interview questionsinterview practiceinterview practice probleminterview practice problemsinterview questionjavascript interview questionsinterview questionshow to validation a form without javascripthow to format a phone numberform validation htmlhow to validate a form with htmlhow to validate a form without javascript solutionhow to validate a form with html solutionHow to Do Form Validation Without JavaScriptHow to Do Form Validation Without JavaScript solution

Rachael Smith

How to Do Form Validation Without JavaScript

The Problem

The Solution

How to Style a Form with HTML and CSS

When to Use a React Context vs a JS file

Sign up for updates when new content gets released!