Javascript form validation with file upload
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>