validation-with-lightbox-v1.1

Execute jQuery validation if submitting a form , display error and success message with lightbox, files which are included in this project:

1. demo.html
2. success.html
3. css/
   a) jquery-valid-lightbox-v1_1.css
b) style.css
4. scripts/ a) jquery-valid-lightbox-v1.1.js
   

---

1) demo.html
Demo Page with a few lines of css style
This file can validate the input field and display error and success message with lightbox.
http://tool.soyosolution.com/validation-with-lightbox/demo.html

2) success.html
When validation is submitted, and also you set the config value "submit_form" in jquery-valid-lightbox-v1.1.js as true, You will see this page.
http://tool.soyosolution.com/validation-with-lightbox/demo.html

3a) css (folder)/jquery-valid-lightbox-v1_1.css
CSS style code of this page, for demo to public :
http://tool.soyosolution.com/validation-with-lightbox/index.html

3b) css (folder)/style.css
CSS style code of this page, for demo to public, if you want apply this plugin into your code, you can apply jquery-valid-lightbox-v1_1.css only:
http://tool.soyosolution.com/validation-with-lightbox/index.html

4a) scripts/jquery-valid-lightbox-v1.1.js<
All javascript was placing in this file.

---

Update

=== 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

---

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 checking('success.html');">
    <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="Bike">bike<br>
            <input type="checkbox" name="service" value="Car">car  
        </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" >
    <br /><br />
</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

DEMO SITE

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