JQuery Form Validation

Basic Form Validation by using JavaScript Library JQuery. All scenario has managed to validate form as valid name, email, phone, checkbox selected or not & last upload file validation too.


For Demo & Free Source Code Scroll down.

To make this application UI i've used Bootstrap. Below is the structure of HTML & JQuery Code.

<form class="col-md-8" method="post" onsubmit="return false">
    <p class="col-12 pb-md-4 px-0">SUBMIT YOUR APPLICATION</p>
    <div class="form-group my-4 row">
        <label class="col-sm-2 col-form-label px-2">Name <span class="required-text">*</span></label>
        <div class="col-sm-10">
            <input type="text" id="name" class="form-control">
            <p id="name_message" class="text-danger m-0"></p>
    <div class="form-group my-4 row">
        <label class="col-sm-2 col-form-label px-2">Phone <span class="required-text">*</span></label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="phone" onkeypress="javascript:return isNumber(event)">
            <p id="phone_message" class="text-danger m-0"></p>
    <p class="text-center pb-4 feedback-body mt-5">
        <button class="py-3 px-5" type="submit" id="btn" onclick="submitRegisterForm()" class="btn btn-primary">Submit Application</button>

In Below code, I've used REGULAR EXPRESSION Validations to validate input texts

var emailRegex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var nameregex = /^[a-zA-Z ]*$/;

In Below code, I've used CHANGE Method to validate checkboxes either they are checked or not

$('input.form-check').on('change', function() {
    $('input.form-check').not(this).prop('checked', false);  

And at last, below validation to get upload file name & then style standard choose file box sccording to you. For that I've used CSS & JQuery

function getFileName() {
    var x = document.getElementById('upload-input')
    document.getElementById('fileName').innerHTML = x.value.split('\\').pop()

For working example, You will get all files, when you download the source code. And after than you can edit it according to you

if you face any issues you can contact by asking question on Developers Community

You can go through Demo as well as Download source code for the same & make changes according to you

Do You have Ready Project?

Share It With Others. Submit Your Project & get Featured On Our Website.



More Great Articles