Javascript Forms Required Fields validation Example

Today, We want to share with you javascript form validation example download.In this post we will show you registration form in javascript with database connection, hear for validation in javascript for registration form we will give you demo and example for implement.In this post, we will learn about Simple JavaScript Form Validation with an example.

Form validation using HTML and JavaScript

Example 1: js form validation

  Name: 
  

JavaScript : Download the validation Codes

Example 2: JavaScript: Convert to Number

let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Example :

HTML Code

    
    



Registration Form - www.pakainfo.com


    

        

            Member id:
            
        

        

            Member Password:
            
        

        

            Member Name:
            
        

        

            Address:
            
        

        

            Country:
            
                (Please select a country)
                Afghanistan
                Albania
                Algeria
                Andorra
                Angola
            
        

        

            ZIP Code:
            
        

        

            Email:
            
        

        

            Sex:
            
            Male
            
            Female
        

        

            Language:


                
                English


                
                Non English

        

        

    

validation.js

function formValidation()
{
    var uid = document.registration.memberid;
    var passid = document.registration.passid;
    var uname = document.registration.membername;
    var uadd = document.registration.address;
    var ucountry = document.registration.country;
    var uzip = document.registration.zip;
    var uemail = document.registration.email;
    var mgender = document.registration.msex;
    var fgender = document.registration.fsex;

    if(validateMembername(uid,5,12))
    {
        if(validatePassword(passid,7,12))
        {
            if(checkNameAllWords(uname))
            {
                if(alphanumeric(uadd))
                {
                    if(countryselect(ucountry))
                    {
                        if(allnumeric(uzip))
                        {
                            if(ValidateEmail(uemail))
                            {
                                if(validgender(mgender,fgender))
                                {
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    return false;
}


function validateMembername(memberinput) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores

    if (memberinput.value == "") {
        memberinput.style.background = 'Blue';
        error = "You didn't enter a membername.\n";
        alert(error);
        return false;

    } else if ((memberinput.value.length < 5) || (memberinput.value.length > 12)) {
        memberinput.style.background = 'Blue';
        error = "The membername is the wrong length.\n";
        alert(error);
        return false;

    } else if (illegalChars.test(memberinput.value)) {
        memberinput.style.background = 'Blue';
        error = "The membername contains illegal characters.\n";
        alert(error);
        return false;

    } else {
        memberinput.style.background = 'White';
    }
    return true;
}

function validatePassword(memberinput) {
    var error = "";
    var illegalChars = /[\W_]/; // allow only letters and numbers

    if (memberinput.value == "") {
        memberinput.style.background = 'Blue';
        error = "You didn't enter a password.\n";
        alert(error);
        return false;

    } else if ((memberinput.value.length < 7) || (memberinput.value.length > 15)) {
        error = "The password is the wrong length. \n";
        memberinput.style.background = 'Blue';
        alert(error);
        return false;

    } else if (illegalChars.test(memberinput.value)) {
        error = "The password contains illegal characters.\n";
        memberinput.style.background = 'Blue';
        alert(error);
        return false;

    } else if ( (memberinput.value.search(/[a-zA-Z]+/)==-1) || (memberinput.value.search(/[0-9]+/)==-1) ) {
        error = "The password must contain at least one numeral.\n";
        memberinput.style.background = 'Blue';
        alert(error);
        return false;

    } else {
        memberinput.style.background = 'White';
    }
    return true;
}

function checkNameAllWords(uname)
{
    var letters = /^[A-Za-z]+$/;
    if(uname.value.match(letters))
    {
        return true;
    }
    else
    {
        alert('Membername must have alphabet characters only');
        return false;
    }
}

function alphanumeric(uadd)
{
    var letters = /^[0-9a-zA-Z]+$/;
    if(uadd.value.match(letters))
    {
        return true;
    }
    else
    {
        alert('Member address must have alphanumeric characters only');
        uadd.focus();
        return false;
    }
}

function countryselect(ucountry)
{
    if(ucountry.value == "Default")
    {
        alert('Select your country from the list');
        return false;
    }
    else
    {
        return true;
    }
}

function allnumeric(uzip)
{
    var numbers = /^[0-9]+$/;
    if(uzip.value.match(numbers))
    {
        return true;
    }
    else
    {
        alert('ZIP code must have numeric characters only');
        return false;
    }
}
function checkEmail() {

    var email = document.getElementById('txtEmail');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email.value)) {
        alert('Please provide a valid email address');
        email.focus;
        return false;
    }
}

function validgender(mgender,fgender)
{
    x=0;

    if(mgender.checked)
    {
        x++;
    } if(fgender.checked)
{
    x++;
}
    if(x==0)
    {
        alert('Select Male/Female');
        return false;
    }
    else
    {
        alert('Form Successfully Submitted');
        window.location.reload()
        return true;}
}

I hope you get an idea about JavaScript Form Validation Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.