Jquery Training

Javascript form validation with file upload

: javascript form validation with file upload.

Javscript form validation with file upload has following code

For form validation with file upload we will start the code from style

.error{color:red; font-size:12px;}
    .styleid{
        color:red; 
        display:none; 
        font-size:11px; 
        float:right;
    }

#userName-info{color:red; font-size:12px; font-weight:normal} 
 #userEmail-info{color:red;font-size:12px; font-weight:normal} 
 #userMobile-info{color:red;font-size:12px; font-weight:normal} 
 #userGender-info{color:red;font-size:12px; font-weight:normal} 
 #userSkillset-info{color:red;font-size:12px; font-weight:normal} 
 #userUpload-info{color:red;font-size:12px; font-weight:normal} 

For form validation with file upload the main javascript code

$(document).ready(function(){
        $('#loder').hide();     
        });
    function sendContact() {
        var valid;
        valid = validateContact();
        if (valid) {
            var fullname = $("#fullname").val();
            var userEmail = $("#userEmail").val();
            var userMobile = $("#userMobile").val();
            var gender = $("#gender").val();            
            var cov_ltr = $("#cov_ltr").val();
            var user_doc = $("#user_doc").val();
            $.post("url of post",
                    {
                        fullname: fullname,
                        userEmail: userEmail,
                        userMobile: userMobile,
                        gender: gender,                        
                        cov_ltr: cov_ltr,
                        user_doc: user_doc,
                    }).success(function (data) {               
                $("#MessageSent").show();
            }).error(function () {               
                $("#MessageNotSent").show();
            });
        }
    }

    function validateContact() {
        var valid = true;
        $(".demoInputBox").css('background-color', '');
        $(".info").html('');

        if (!$("#fullname").val()) {
            $("#userName-info").html("( Name required)");
            $("#fullname").css('background-color', '#FFFFDF');
            $("#fullname").focus();
            return false;

        }

        if (!$("#userEmail").val()) {
            $("#userEmail-info").html("( Email required)");
            $("#userEmail").css('background-color', '#FFFFDF');
            $("#userEmail").focus();
            return false;
        }
        if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
            $("#userEmail-info").html("(Please enter a valid email)");
            $("#userEmail").css('background-color', '#FFFFDF');
            $("#userEmail").focus();
            return false;
        }
        if (!$("#userMobile").val()) {
            $("#userMobile-info").html("( Mobile number required)");
            $("#userMobile").css('background-color', '#FFFFDF');
            $("#userMobile").focus();
            return false;

        }

        else if (isNaN($("#userMobile").val())) {
            $("#userMobile-info").html("(Mobile no must be numeric)");
            $("#userMobile").css('background-color', '#FFFFDF');
            $("#userMobile").focus();
            return false;
        }
        else if ($("#userMobile").val().length < 10 || $("#userMobile").val().length > 18) {
            $("#userMobile-info").html("( Mobile no must be between 10 to 18 dight)");
            $("#userMobile").css('background-color', '#FFFFDF');
            $("#userMobile").focus();
            return false;
        }

        if (!$("#gender").val()) {
            $("#userGender-info").html("(Gender required)");
            $("#userGender").css('background-color', '#FFFFDF');
            $("#gender").focus();
            return false;
        }       

        if (!$("#message").val()) {
            $("#userSkillset-info").html("( Cover letter required)");
            $("#message").css('background-color', '#FFFFDF');
            $("#message").focus();
            return false;
        }

        var status=getfile();

    if(status==true){
        $('#load').html('<img src="loder.gif"/>');
        $(":submit").attr("html", 'Processing...');
        $(":submit").attr("disabled", true);
    return true;
    }if(status==false){
        $('#userUpload-info').html('please upload doc, docx or pdf files only');
        $('#user_doc').focus();
        return false;   
    }

    }

    function wipno(val) {       
        if (isNaN($("#userMobile").val())) {
            $("#userMobile").val("");
            $("#userMobile-info").html("( Please enter vaild mobile number)");
        } else {
            $("#userMobile-info").html("");
        }
    }

    function getfile() {
            var allowedFiles = [".doc", ".docx", ".pdf"];
            var fileUpload = document.getElementById("user_doc");
            var lblError = document.getElementById("userUpload-info");     
            var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
            if (!regex.test(fileUpload.value.toLowerCase())) {
                lblError.innerHTML = "Please upload <b>" + allowedFiles.join(', ') + "<\/b> files only.";
        $('#user_doc').focus();
                return false;
            }else{
            lblError.innerHTML = "";
            return true;
        }
        }

    function messageInputcheck(val) {
        var length = $("#message").val().length;
        if (length < 50) {
            $("#message").css("border", "1px solid red");
            $("#drow").css("display", "block");
            $("#drow").text("Characters left with " + (50 - length) + "*").css("color", "red");
        }
        else {
            $("#message").css("border", "1px solid green");
            $("#drow").css("display", "none");
        }

    }
    function messageInputcheck(val) {
        var length = $("#message").val().length;
        if (length < 50) {
            $("#message").css("border", "1px solid red");
            $("#drow").css("display", "block");
            $("#drow").text("Characters left with " + (50 - length) + "*").css("color", "red");
        }
        else {
            $("#message").css("border", "1px solid green");
            $("#drow").css("display", "none");
        }

    }

    function messageChange(val) {
        var length = $("#message").val().length;
        if (length < 50) {
            $("#message").css("border", "1px solid red");
            $("#drow").css("display", "block");
            $("#drow").text("Characters left with " + (50 - length) + "*").css("color", "red");
        }
        else {
            $("#message").css("border", "1px solid green");
            $("#drow").css("display", "none");
        }
    }

<!DOCTYPE html>

<html>
<head>
    <title>Javascript form validation with image upload</title>
    <link href=
    "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel=
    "stylesheet">
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
    "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <style>
    .error{color:red; font-size:12px;}
    .styleid{
        color:red; 
        display:none; 
        font-size:11px; 
        float:right;
    }

    #userName-info{color:red; font-size:12px; font-weight:normal}
    #userEmail-info{color:red;font-size:12px; font-weight:normal}  
    #userMobile-info{color:red;font-size:12px; font-weight:normal}
    #userGender-info{color:red;font-size:12px; font-weight:normal}    
    #userSkillset-info{color:red;font-size:12px; font-weight:normal}
    #userUpload-info{color:red;font-size:12px; font-weight:normal}

    </style>
    <script>
    $(document).ready(function(){
        $('#loder').hide();     
        });
    function sendContact() {
        var valid;
        valid = validateContact();
        if (valid) {
            var fullname = $("#fullname").val();
            var userEmail = $("#userEmail").val();
            var userMobile = $("#userMobile").val();
            var gender = $("#gender").val();            
            var cov_ltr = $("#cov_ltr").val();
            var user_doc = $("#user_doc").val();
            $.post("url of post",
                    {
                        fullname: fullname,
                        userEmail: userEmail,
                        userMobile: userMobile,
                        gender: gender,                        
                        cov_ltr: cov_ltr,
                        user_doc: user_doc,
                    }).success(function (data) {               
                $("#MessageSent").show();
            }).error(function () {               
                $("#MessageNotSent").show();
            });
        }
    }

    function validateContact() {
        var valid = true;
        $(".demoInputBox").css('background-color', '');
        $(".info").html('');

        if (!$("#fullname").val()) {
            $("#userName-info").html("( Name required)");
            $("#fullname").css('background-color', '#FFFFDF');
            $("#fullname").focus();
            return false;

        }

        if (!$("#userEmail").val()) {
            $("#userEmail-info").html("( Email required)");
            $("#userEmail").css('background-color', '#FFFFDF');
            $("#userEmail").focus();
            return false;
        }
        if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
            $("#userEmail-info").html("(Please enter a valid email)");
            $("#userEmail").css('background-color', '#FFFFDF');
            $("#userEmail").focus();
            return false;
        }
        if (!$("#userMobile").val()) {
            $("#userMobile-info").html("( Mobile number required)");
            $("#userMobile").css('background-color', '#FFFFDF');
            $("#userMobile").focus();
            return false;

        }

        else if (isNaN($("#userMobile").val())) {
            $("#userMobile-info").html("(Mobile no must be numeric)");
            $("#userMobile").css('background-color', '#FFFFDF');
            $("#userMobile").focus();
            return false;
        }
        else if ($("#userMobile").val().length < 10 || $("#userMobile").val().length > 18) {
            $("#userMobile-info").html("( Mobile no must be between 10 to 18 dight)");
            $("#userMobile").css('background-color', '#FFFFDF');
            $("#userMobile").focus();
            return false;
        }

        if (!$("#gender").val()) {
            $("#userGender-info").html("(Gender required)");
            $("#userGender").css('background-color', '#FFFFDF');
            $("#gender").focus();
            return false;
        }       

        if (!$("#message").val()) {
            $("#userSkillset-info").html("( Cover letter required)");
            $("#message").css('background-color', '#FFFFDF');
            $("#message").focus();
            return false;
        }

        var status=getfile();

    if(status==true){
        $('#load').html('<img src="loder.gif"/>');
        $(":submit").attr("html", 'Processing...');
        $(":submit").attr("disabled", true);
    return true;
    }if(status==false){
        $('#userUpload-info').html('please upload doc, docx or pdf files only');
        $('#user_doc').focus();
        return false;   
    }

    }

    function wipno(val) {       
        if (isNaN($("#userMobile").val())) {
            $("#userMobile").val("");
            $("#userMobile-info").html("( Please enter vaild mobile number)");
        } else {
            $("#userMobile-info").html("");
        }
    }

    function getfile() {
            var allowedFiles = [".doc", ".docx", ".pdf"];
            var fileUpload = document.getElementById("user_doc");
            var lblError = document.getElementById("userUpload-info");     
            var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
            if (!regex.test(fileUpload.value.toLowerCase())) {
                lblError.innerHTML = "Please upload <b>" + allowedFiles.join(', ') + "<\/b> files only.";
        $('#user_doc').focus();
                return false;
            }else{
            lblError.innerHTML = "";
            return true;
        }
        }

    function messageInputcheck(val) {
        var length = $("#message").val().length;
        if (length < 50) {
            $("#message").css("border", "1px solid red");
            $("#drow").css("display", "block");
            $("#drow").text("Characters left with " + (50 - length) + "*").css("color", "red");
        }
        else {
            $("#message").css("border", "1px solid green");
            $("#drow").css("display", "none");
        }

    }
    function messageInputcheck(val) {
        var length = $("#message").val().length;
        if (length < 50) {
            $("#message").css("border", "1px solid red");
            $("#drow").css("display", "block");
            $("#drow").text("Characters left with " + (50 - length) + "*").css("color", "red");
        }
        else {
            $("#message").css("border", "1px solid green");
            $("#drow").css("display", "none");
        }

    }

    function messageChange(val) {
        var length = $("#message").val().length;
        if (length < 50) {
            $("#message").css("border", "1px solid red");
            $("#drow").css("display", "block");
            $("#drow").text("Characters left with " + (50 - length) + "*").css("color", "red");
        }
        else {
            $("#message").css("border", "1px solid green");
            $("#drow").css("display", "none");
        }
    }

    </script>
</head>
<body>
    <form action="#" enctype="multipart/form-data" id="app_frm" method="post"
    name="app_frm" onsubmit="return validateContact();">
        <div class="form-group">
            <label for="name">Full Name <span class="red">*</span><span class=
            "info" id="userName-info"></span></label> <input class=
            "form-control" id="fullname" name="uname" onblur=
            "this.placeholder = 'Type your full name'" onfocus=
            "this.placeholder = ''" placeholder="Type your full name" type=
            "text" value=""> <span class="styleid" id="name_id">*Please type
            your name</span>
        </div>
        <div class="form-group" style=
        "width:48%;float:left; margin-right:10px;">
            <label for="email">Email <span class="red">*</span> <span class=
            "info" id="userEmail-info"></span></label> <input class=
            "form-control" id="userEmail" name="email" onblur=
            "this.placeholder = 'Type your email'" onfocus=
            "this.placeholder = ''" placeholder="Type your email" type="text"
            value="">
        </div>
        <div class="form-group pull-right" style="width:49%;float:left;">
            <label for="subject">Contact <span class="red">*</span>
            <span class="info" id="userMobile-info"></span>
            </label>
            <input class="form-control" id="userMobile" name="contact" onblur=
            "this.placeholder = 'Type your contact number'" onfocus=
            "this.placeholder = ''" onkeyup="wipno(this.value);" placeholder=
            "Type your contact number" type="text" value="">
        </div>
        <div class="form-group">
            <label for="subject">Gender <span class="red">*</span> 
            <span class="info" id="userGender-info"></span></label>
            <select class="form-control" id="gender" name="gender">
                <option disabled="disabled" selected="selected">Select gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select> 
            <span class="error" id="name_id"></span>
        </div>
        <div class="form-group">
            <label for="subject">Cover Letter <span class="red">*</span>
            <span class="info" id="userSkillset-info"></span></label> 
            <textarea class="form-control" id="message" name="cov_ltr"
            onblur="this.placeholder = 'Write your message...'" onchange=
            "messageChange(this.value)" onclick="messageInput(this.value);"
            onfocus="this.placeholder = ''" onkeyup=
            "messageInputcheck(this.value);" placeholder="Write cover letter"
            rows="6"></textarea>
            <p id="drow" style="float:right; color:red; font-size:11px;">Characters left with 50*</p>
        </div>
        <div class="form-group">
            <label for="message">Upload your Resume(doc,docx and pdf filesonly)
             <span class="red">*</span>
             <span class="info" id="userUpload-info"></span></label> 
             <input id="user_doc" name="bannerfile" onchange="getfile(this);" type="file">
        </div>
        <input class="btn btn-default view-details" type="submit" value="Submit">
        <img id="loder" src="loader.gif">
    </form>
</body>
</html>