Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted January 24th, 2016
Set up Form Validation

In this blog I will explain the basic set up of form validation using HTML, CSS and JavaScript.

Creating the form

We’ll create the form first with HTML and after creating we style with it CSS (see code below). For this form we need to use input type for name, email subject and text field. We also use ID in the inputs in order to do something with JavaScript later. The label element will be used to place the error or valid text in it.

The onkeyup event, is an event that is triggered when the user releases a key. So whenever someone presses a key on that input field, it would jump into that function in JavaScript, and in that function we’ll place the validation code.

For the error and valid icon, I used font-awesome, you’ll just need to include the CSS in the head. To know how to use and inclulude Font Awesome click hier.
After including the CSS of Font Awesome we need to place the element in the form <i class="fa fa-check>. fa-check and fa-times is the name of the icon we are using. I also gave the icons of each input a specific ID. For The input fullName I gave the icon fa-check an ID of nFormValid, and for the fa-times an ID nFormerror. So whenever you type the right validation of the input, the fa-check will show and when it’s not valid the fa-times icon shows.

<form>
    <div class="contactForm">
        <input type="text" name="fullName" id="fullName" placeholder="Full name*" onkeyup="validateName()"/>
        <i class="fa fa-check" id="nFormValid"></i>
        <i class="fa fa-times" id="nFormError"></i>
        <label for="fullName" id="fullNamePrompt"></label>
        <br />
        <input type="text" name="email" id="email" placeholder="E-mail*" onkeyup="validateEmail()"/>
        <i class="fa fa-check" id="eFormValid"></i>
        <i class="fa fa-times" id="eFormError"></i>
        <label for="email" id="emailPrompt"></label>
        <br />
        <input type="text" name="subject" id="subject" placeholder="Subject*" onkeyup="validateSubject()"/>
        <i class="fa fa-check" id="sFormValid"></i>
        <i class="fa fa-times" id="sFormError"></i>
        <label for="subject" id="subjectPrompt"></label>
        <br />
        <textarea id="message" name="message" placeholder="Message" onkeyup="validateMessage()"></textarea>
        <i class="fa fa-check" id="mFormValid"></i>
        <i class="fa fa-times" id="mFormError"></i>
        <label for="message" id="messagePrompt"></label>
        <br />
        <div class="send_btn">
            <input type="submit" name="submit" id="submit" value="Submit" onclick="validateSend()"/>
        </div>
    </div>
</form>

Styling the form

To get the similar style of the image above we need to style the form with CSS (see code below).

.contactForm input[type="text"] {
  width: 96%;
  margin: 3px 0px;
  padding: 2%;
  border-radius: 3px;
  border: none;
}

.contactForm label {
  background: #D00101;
  color: #fff;
  position: relative;
  display: none;
  padding: 6px;
  top: 6px;
}

.contactForm textarea {
  width: 96%;
  margin: 3px 0px;
  padding: 2%;
  min-height: 150px;
  border-radius: 3px;
}

.contactForm input[type="submit"] {
  background: #98C93A;
  color: #fff;
  border: none;
  width: 250px;
  border-radius: 3px;
  padding: 18px;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
}

.contactForm input[type="submit"]:hover {
  background: #8F76B9;
}

.dv_input {
  position: relative;
}

#nFormValid, #nFormError, #eFormValid, #eFormError, #sFormValid, #sFormError, #mFormValid, #mFormError     {
  display: none;
}

.fa {
  font-size: 18px;
  position: absolute;
  right: 10px;
  top: 15px;
}

.fa-check {
  color: #06D406;
}

.fa-times {
  color: #D00101;
}

input:focus {
  box-shadow: none;
  outline: 0;
  border: 0;
}

.has-error {
  border: 1px solid #D00101!important;
  box-shadow: 0px 0px 6px 1px rgba(208, 1, 1, 0.7)!important;
}

.has-success {
  border: 1px solid #06D406!important;
  box-shadow: 0 0 6px 1px rgba(6, 212, 6, 0.7)!important;
}

The classes .has-errors and has-success is for the border of the inputs, when it’s valid has-success will be called so the border will be green and when it s not valid the border will turn red.

Let’s validate with JavaScript!

First we need to create a function called messagePrompt with the parameters message and promptLocation. The parameter message is the message we’ll be giving if the input is valid or not valid. And the promptLocation is the location where we be placing the error/valid text, so in the label with the specific ID.

function messagePrompt(message, promptLocation) {
    document.getElementById(promptLocation).innerHTML = message;
}

The showPrompt and hidePrompt is for displaying and hiding the messagePrompt.
And the errorBorder and validBorder is for changing the color of the color of the border of the input

function showPrompt(id) {
    document.getElementById(id).style.display = "inline-block";
}
function hidePrompt(id) {
    document.getElementById(id).style.display = "none";
}
function errorBorder(id) {
    document.getElementById(id).className = "has-error";
}
function validBorder(id) {
    document.getElementById(id).className = "has-success";
}


Now we create the function to validate the name. We call the function validateName(). That is the function that we used in the onkeyup for the input name. The first if statement: if(fullName.length == 0) means, when the input field is empty or 0 something happens. Inside that if statement it says: When the field is empty the messagePrompt function will be called with the message Name is required and will be place inside the label with the ID fullNamePrompt. In order to show the message the function showLabel will be called and it will display the label. It wil also show the icon fa-times with the ID of nFormError. And the border colour will change cause the function errorField is also called.

On the second if statement, I used Regular expression to validate the name. You should give your full name in order to match the Regular expression. And if it doesn’t match it will give you the same error like on the first if statement.

But if fullName.lenght is not empty and if it matches the regular expression, the showLabel will be called and the icon fa-check will display and the prompt message will hide. And the border of the input also changes to green.

function validateName() {
    var voornaam = document.getElementById("voornaam").value;

    if(fullName.length === 0) {
        messagePrompt("Name is required", "fullNamePrompt");
        showLabel("fullNamePrompt");
        showLabel("nFormError");
        errorField("fullName");
        return false;
    }
    if(!voornaam.match(/^[A-Za-z]*.\s.*/)) {
        messagePrompt("Please enter First and Last name", "fullNamePrompt");
        showLabel("fullNamePrompt");
        showLabel("nFormError");
        hideLabel("nFormValid");
        errorField("fullName");
        return false;
    }
    showLabel("nFormValid");
    hideLabel("nFormError");
    validField("fullName");
    hideLabel("fullNamePrompt");
    return true;
    }

The same rule applies for validating email and subject, you only need to create a new function called validateEmail() and validateSubject()

function validateEmail() {

    var email = document.getElementById("email").value;
    if(email.length == 0) {
        showLabel("emailPrompt");
        showLabel("eFormError");
        errorField("email");
        messagePrompt("Email is required", "emailPrompt", "white");
        return false;
    }
    if(!email.match(/^[A-Za-z\._\-0-9]*@[A-Za-z]*[\.][a-z]{2,10}$/)) {
        showLabel("emailPrompt");
        errorField("email");
        showLabel("eFormError");
        hideLabel("eFormValid");
        messagePrompt("Please enter valid email address, e.g. example@email.com", "emailPrompt", "white");
        return false;
    }
    showLabel("eFormValid");
    hideLabel("eFormError");
    validField("email");
    hideLabel("emailPrompt");
    return true;
}

function validateSubject() {

    var onderwerp = document.getElementById("subject").value;
    if(onderwerp.length == 0) {
        showLabel("subjectPrompt");
        showLabel("sFormError");
        hideLabel("sFormValid");
        errorField("subject");
        messagePrompt("Subject is required", "onderwerpPrompt");
        return false;
    }
    showLabel("sFormValid");
    hideLabel("sFormError");
    validField("subject");
    hideLabel("subjectPrompt");
    return true;
}

And lastly for validating the textarea you also need to create a function called validateMessage().
the var required = 100; means that message should have at least 100 characters and var left is the required character minus the characters you type in the textarea.
So when you reach the 100 characters the error text will hide and the icon fa-check will show.

function validateMessage() {

    var bericht = document.getElementById("bericht").value;
    var required = 100;
    var left = required - bericht.length;

    if(left > 0) {
        showLabel("berichtPrompt");
        showLabel("mFormError");
        hideLabel("mFormValid");
        messagePrompt("Atleast " + left + " charachters", "berichtPrompt");
        return false;
    }
    hideLabel("berichtPrompt");
    showLabel("mFormValid");
    hideLabel("mFormError");
    return true;

Posted by Valerie Varias

Comments

  • Johnd679 says:

    Outstanding post, you have pointed out some fantastic points, I as well think this is a very great website. cbkfdfgdedde

Leave a Reply

Your email address will not be published. Required fields are marked *