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

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/do_action.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Form Validation using a sample registration form</title>
    <script src="validation.js"></script>
</head>
<body onload="document.registration.memberid.focus();">

<h2>Registration Form - www.pakainfo.com</h2>

<form name='registration' onSubmit="return formValidation();">
    <ul>
        <li>
            <label for="memberid">Member id:</label>
            <input type="text" name="memberid" size="12" />
        </li>

        <li>
            <label for="passid">Member Password:</label>
            <input type="password" name="passid" size="12" />
        </li>

        <li>
            <label for="membername">Member Name:</label>
            <input type="text" name="membername" size="50" />
        </li>

        <li>
            <label for="address">Address:</label>
            <input type="text" name="address" size="50" />
        </li>

        <li>
            <label for="country">Country:</label>
            <select name="country">
                <option selected="" value="Default">(Please select a country)</option>
                <option value="AF">Afghanistan</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="AS">Andorra</option>
                <option value="AD">Angola</option>
            </select>
        </li>

        <li>
            <label for="zip">ZIP Code:</label>
            <input type="text" name="zip" />
        </li>

        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" size="50" />
        </li>

        <li>
            <label id="gender">Sex:</label>
            <input type="radio" name="sex" value="Male" />
            <span>Male</span>
            <input type="radio" name="sex" value="Female" />
            <span>Female</span>
        </li>

        <li>
            <label>Language:</label>


                <input type="checkbox" name="en" value="en" checked />
                <span>English</span>


                <input type="checkbox" name="nonen" value="noen" />
                <span>Non English</span>

        </li>

        <li><input type="submit" name="submit" value="Submit" /></li>
    </ul>
</form>
</body>
</html>

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.