"Validation with Lightbox" is a jQuery plugin for validating form and display error or success message with lightbox effects. This is referenced in some material from Internet and the references are placed at the end of the page.

You can download the full set of code of this jquery plugin from gitHub:

Soyo Solution

Let have a demonstration of the effect first, Please fill in the blanks below and and click the submit button:

Demo Example


Male
Female
Design
Customer Service
newspaper
friend
internet

When you clicked the submit button, error / success message will appear in lightbox dialog,
and the box below :

Display Error Message Here.

HOW TO USE

HTML part

There is HTML part and beware of these 3 points:

You must contain action="javascript:void(0)" onsubmit="return checking('your_url');" in the form tab. action="javascript:void(0)" is for stop submiiting the form, onsubmit="return checking('your_url'); mean run the javascript function named checking() and pass the form submittion target to the javascript funvtion. Text box are idenified with the id name. Radio and checkbox are idenified with the input flied name.

    <form name="demo_form" method="POST" action="javascript:void(0)" onsubmit="return validation_check('result.php');">
        <div class="item">
            <h6><label>First Name</label></h6>
            <div class="input_panel"><input type="text" id="firstname" name="firstname"></div>
        </div>
        <div class="item">
            <h6><label>Last Name</label></h6>
            <div class="input_panel"><input type="text" id="lastname" name="lastname"></div>
        </div>
        <div class="item">
            <h6><label>Age</label></h6>
            <div class="input_panel">
                <select id="age" name="age">
                    <option value=""> - Please select the range -</option>
                    <option value="0">0-18</option>
                    <option value="19">19-35</option>
                    <option value="36">36-50</option>
                    <option value="50">50-90</option>
                    <option value="100">>100</option>
               </select>
            </div>
        </div>
        <div class="item">
            <h6><label>Gender</label></h6>
            <div class="input_panel">
                <input type="radio" name="gender" value="male">Male<br>
                <input type="radio" name="gender" value="female">Female    
            </div>
        </div>
        <div class="item">
            <h6><label>Service you like</label></h6>
            <div class="input_panel">
                <input type="checkbox" name="service" value="design">Design<br>
                <input type="checkbox" name="service" value="cs">Customer Service
            </div>
        </div>
        <div class="item">
            <h6><label>Where to know us</label></h6>
            <div class="input_panel">
                <input type="checkbox" name="where_from" value="newspaper">newspaper<br>
                <input type="checkbox" name="where_from" value="friend">friend<br>
                <input type="checkbox" name="where_from" value="internet">internet
            </div>
        </div>
        <input id="submit" type="submit" value="Submit form" class="btn btn-primary" data-toggle="modal" role="button">
    </form>

CSS part

You can import the file jquery-valid-lightbox-v1_1.css only for apply the styles. We need these CSS is for creating the lightbox dialog:

    <link href="css/jquery-valid-lightbox-v1_1.css" rel="stylesheet" type="text/css" />

Javascript part

You need to import the jquery library first, and than import the javascript file of jquery-valid-lightbox plugin.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-valid-lightbox-v1.1.js"></script>

And than Config the sentences below in jquery-valid-lightbox-v1.1.js:

    var config = {
        "form_name"          : "demo_form",                       //Your form name, not id name
        "submit_form"        : true,                              //"true" is submit form, "false" would pop-up an error message.
        "title-message"      : {
            "success_title"  :"Validation Success",               //Lightbox title when validation was success.
            "error_title"    :"Error!"                            //Lightbox title when validation was fail.
        },
        "success-message"    :"Your application is submittted.",  //Lightbox content when validation was succes.
        "error-message"      : [
            {"name"      :"firstname",                            //1st input field name (name bt not id)
             "err_msg"   :"Title 1 is empty"},                    //Related error (1st input field) if validation was incorrect.
            {"name"      :"lastname" ,                            //2st input field name
             "err_msg"   :"You have fogotten fill in Title 2"},   //Related error (2st input field) if validation was incorrect.
            {"name"      :"age",                                  //3st input field name
             "err_msg"   :"Which is the range of your age"},      //Related error (3st input field) if validation was incorrect.
            {"name"      :"gender",                               //4st input field name
             "err_msg"   :"Please select your gender"},           //Related error (4st input field) if validation was incorrect.
            {"name"      :"service"  ,                            //5st input field name
             "err_msg"   :"Which service you like most ?"},       //Related error (5st input field) if validation was incorrect.
            {"name"      :"where_from"  ,                         //6st input field name
             "err_msg"   :"You havn't fill in where to know us."} //Related error (6st input field) if validation was incorrect.         
        ],
        "footer_close_btn_text" :"Close",     //Close button tex on the bottom-right corner of pop-up message box
        "close_btn_icon"        :"X",         //Close button icon on the top-right corner of pop-up message box
    };

An overview of the value for config:

value Default demo value e.g. Description
form_name demo_form Your form name
submit_form true "true" is submit form, "false" would pop-up an error message.
title-message.success_title Validation Success Lightbox title when validation was success.
title-message.error_title Error! Lightbox title when validation was fail.
success-message Your application is submittted. Lightbox content when validation was succes.
error-message.name gender Your form name, not id name
error-message.err_msg Please select your gender Your form name, not id name
footer_close_btn_text Close Close button tex on the bottom-right corner of pop-up message box
close_btn_icon X Close button tex on the bottom-right corner of pop-up message box

Update

=== 13/04/2015 ===
Many Thanks for a user reporting the fatal problems at the github master-zip package. This update is for fixing the bugs

  • Changed file structure in github master zip folder for adding php version demo files
  • Fix the bugs if user submited the form, can't access the missing "success.html" webpage
  • Update incorrect js and css part at demo.html and index.html
  • Update css style for better appearance in index.html & demo.html
  • follow markup format to tidy up README.md format

=== 02/01/2015 ===

  • If there is too much error messages (the list of message is more than 500px height), use a scroll bar to display message content.
    Update
  • Change the position where the message box to display (5% height of browser screen height).
  • Fixed bug: IE7, IE8 and Firefox can’t click the grid layer to close pop up message box.

=== 18/12/2014 ===

  • Updated the pop-up message box position.

=== 17/12/2014 === Fixed big bugs at IE7&IE8 and rewrote some function for better code.

  • Validation-with-lightbox v1.1 released
  • Rewrite some function for more easy to config.
  • Bug fixed : No lightbox background to be displayed at IE7 and IE8.
  • Add a "x" button at message box top-right corner for close the message box.
  • Add a "close" button at message box botttom-right corner for close the message box.
  • Move error message from hard-code valuables to an object for configing easier

=== 29/04/2014 ===
Validation-with-lightbox released


DEMO SITE

For demo, please visit: http://www.soyosolution.com/tools/validation-with-lightbox/index.php


If there is any bugs in this plugin, please feel free to report us at: info@soyosolution.com