by
51 7
0
4
7,705
11
Top 1% !
Pearl of Wisdom
Specified
OpenSource
Popularity: 681st place
Created
Modified Sep 29, 2016
No tags for this snippet yet.
Languagehtml
LicenseMIT_X11

form validation

Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1461627/form-validation?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="form.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <title> Form </title> </head> <body> <form id="resume_form" class="jotform-form" action="#" method="post" enctype="multipart/form-data" name="resume_form" accept-charset="utf-8" novalidate="true"> <div class="form-all"> <ul class="form-section page-section"> <li class="form-line form-line-column form-col-1 jf-required" data-type="control_textbox"> <label class="form-label form-label-top"for="name"> Name <span class="form-required"> * </span> </label> <div class="form-input-wide jf-required"> <input id="name" name="name" class="form-textbox validate_required form-validation-error" data-type="input-textbox" size="50" value="" type="text"> </div> </li> <li class="form-line form-line-column form-col-2" data-type="control_textbox"> <label class="form-label form-label-top" for="phone"> Phone </label> <div class="form-input-wide jf-required"> <input id="phone" name="phone" class=" form-textbox" data-type="input-textbox" size="50" value="" type="text"> </div> </li> <li class="form-line form-line-column form-col-3" data-type="control_textarea"> <label class="form-label form-label-top" for="comments"> Comments </label> <div class="form-input-wide jf-required"> <textarea id="comments" name="comments" class="form-textarea" cols="35" rows="6"></textarea> </div> </li> <li class="form-line form-line-column form-col-4" data-type="control_fileupload"> <label class="form-label form-label-top" for="attachment"> Attachment </label> <div class="form-input-wide jf-required"> <input id="attachment" name="attachment" class="form-upload validate_upload" data-imagevalidate="yes" file-maxsize="1024" file-minsize="0" file-limit="0" type="file"> </div> </li> <li class="form-line" data-type="control_button"> <div class="form-input-wide"> <div style="text-align:right" class="form-buttons-wrapper"> <button type="submit" class="form-submit-button"> Submit </button> </div> </div> </li> </ul> </div> </form> <form id="contact_form" class="jotform-form" action="#" method="post" enctype="multipart/form-data" name="contact_form" accept-charset="utf-8" novalidate="true"> <div class="form-all"> <ul class="form-section page-section"> <li class="form-line form-line-column form-col-1 jf-required" data-type="control_textbox"> <label class="form-label form-label-top" for="name"> Name <span class="form-required"> * </span> </label> <div class="form-input-wide jf-required"> <input id="name" name="name" class=" form-textbox validate_required form-validation-error" data-type="input-textbox" size="50" value="" type="text"> </div> </li> <li class="form-line form-line-column form-col-2 jf-required" data-type="control_textbox"> <label class="form-label form-label-top" for="email"> Email <span class="form-required"> * </span> </label> <div class="form-input-wide jf-required"> <input id="email" name="email" class=" form-textbox validate_required validate_email" data-type="input-textbox" size="50" value="" type="text"> </div> </li> <li class="form-line form-line-column form-col-3 jf-required" data-type="control_textarea"> <label class="form-label form-label-top" for="message"> Message <span class="form-required"> * </span> </label> <div class="form-input-wide jf-required"> <textarea id="message" name="message" class="form-textarea validate_required" cols="35" rows="6"></textarea> </div> </li> <li class="form-line" data-type="control_button"> <div class="form-input-wide"> <div style="text-align:right" class="form-buttons-wrapper"> <button type="submit" class="form-submit-button"> Submit </button> </div> </div> </li> </ul> </div> <script type="text/javascript"> VALIDATIONS = { REQUIRED: 0, EMAIL: 1, FILE: 2, } EXCEPTIONS = { REQUIRED: "This field is required.", EMAIL: "Enter a valid e-mail address.", FILE_TYPE: "Invalid file extention.", FILE_SIZE: "Invalid file size.", FORM: "There are errors on the form. Please fix them before continuing.", } function generate_form_error(message) { error = $("<div></div>").addClass("form-button-error").append( $("<p></p>").text(message) ) return error; } function generate_error(message) { error = $("<div></div>").addClass("form-error-message").append( $("<img>").attr("src", "exclamation-octagon.png").css("margin-right", "5px").attr("align", "left") ).append( document.createTextNode(message) ).append( $("<div></div>").addClass("form-error-arrow").append( $("<div></div>").addClass("form-error-arrow-inner") ) ) return error; } function clear_errors(input) { input.parent().find(".form-error-message").each(function() { $(this).remove(); }) } function add_error(input, message) { input.parent().append(generate_error(message)); } function isValidEmailAddress(emailAddress) { var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; return pattern.test(emailAddress); }; function validate(input, type) { if (input.parent().find(".form-error-message").length > 0) { return false; } switch (type) { case VALIDATIONS.REQUIRED: clear_errors(input); if (input.val().length === 0) add_error(input, EXCEPTIONS.REQUIRED); break; case VALIDATIONS.EMAIL: clear_errors(input); if (!isValidEmailAddress(input.val())) add_error(input, EXCEPTIONS.EMAIL); break; case VALIDATIONS.FILE: clear_errors(input); var ext = $(this).val().split('.').pop().toLowerCase(); if($.inArray(ext, ["pdf", "doc", "docx", "xls", "xlsx", "csv", "rtf", "html", "mpg", "flv", "avi", "jpg", "jpeg", "png", "gif"]) == -1) add_error($(this), EXCEPTIONS.FILE_TYPE); var size = this.files[0].size; console.log(ext, size); if(size < 0 || size > 1024*1024) add_error($(this), EXCEPTIONS.FILE_SIZE); break; default: } } $("[class^='validate'], [class*=' validate'], :not([class*=' validate_upload'])").focus(function() { clear_errors($(this)); }) $(".validate_required").focusout(function() { validate($(this), VALIDATIONS.REQUIRED); }) $(".validate_email").focusout(function() { validate($(this), VALIDATIONS.EMAIL); }) $(".validate_upload").bind("change", function (e) { validate($(this), VALIDATIONS.FILE); }) $(".form-submit-button").click(function() { $(this).parents("form").find(".validate_required").each(function() { validate($(this), VALIDATIONS.REQUIRED); }) if ($(this).parents("form").find(".form-error-message").length > 0) { $(this).parent().parent().find(".form-button-error").each(function() { $(this).remove(); }) $(this).parent().parent().append(generate_form_error(EXCEPTIONS.FORM)); return false; } }) </script> </body> </html>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus