How to search item in list in javascript
Laravel social login using Socialite
WooCommerce important hooks for My Account page
How to interchange two divs using jquery
How to reorder checkout form fields in WooCommerce

Javascript form validation with file upload

dhurba Uncategorized

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>

Leave comment

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

Categories

Jquery

Javascript