This HOW TO is for DaDaBIK 4.2
What you will need:
The jQuery validation plugin from this site.
└► http://bassistance.de/jquery-plugins/jquery-plugin-validation/
It requires jQuery 1.3.2 or 1.4.2 which can be downloaded from here.
└► http://jquery.com/
(Default download option for production is all you need.)
Open your header.php file and add the following in between your <head> </head> tags
<script language="javascript" type="text/javascript" src="PATH TO JS FOLDER/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="PATH TO JS FOLDER/jquery.validate.js"></script>
jQuery can be called from class= for each form element but I didn't want to hard code all that into business_logic.php so all the jQuery form rules are in a separate js file.
<script language="javascript" type="text/javascript" src="PATH TO JS FOLDER/jquery.form.rules.js"></script>
The form does need an id= which DaDaBIK already has in the function build_form section of business_logic.php (line 491)
Example (line 515): $form .= "<form id=\"dadabik_main_form\" name=\"contacts_form\" method=\"post\" action=\"".$action."?table_name=".urlencode($table_name)."&function=".$function;
But since this is used in all forms (insert, update, search etc..) you could run into trouble if you had the same form elements in an "update" form and a "search" form and validation was only needed for the "update" form. So what I did was add IF statements for the different form types to change the id= as needed.
Example for form type update:
(This replaces line 515 above.)
if ( $form_type == "update" or $form_type == "ext_update") {
$form .= "<form id=\"update\" name=\"contacts_form\" method=\"post\" action=\"".$action."?table_name=".urlencode($table_name)."&function=".$function;
}
You can add IF statements for the other forms types (insert, search etc.) below this one to suit your needs.
Below is an example of the form rules used in the update form from my demo site. This would be placed inside the jquery.form.rules.js file.
$(document).ready(function() {
$("#update").validate({
rules: {
date_received: {
required: true,
date: true
},
received_by: {
required: true
}
},
messages: {
date_received: {
required: "Date received is required",
date: "Please enter a valid date."
},
received_by: {
required: "Received by is required"
}
}
});
})
Note: The date_received and received_by are element names in my form/database and are just an example.
You can add some style to your validation too. Below is what I added to my CSS style sheet.
label.error { float: none; color: red; padding-left: 0.5em; vertical-align: middle; font-size: 0.875em; font-style: italic;}
The element label and class error are the default values in jquery.validate.js and are dynamically created by the script, no need to add anything to your form.
Below is jQuery form validation in action when the form is saved without filling in all the required fields:
And here is an example of one of the form fields with partial information. jQuery form validation catches this and gives you the appropriate message.
Hope you find this useful / helpful.
My DaDaBIK Demo: http://dadabik.kicks-ass.net
What you will need:
The jQuery validation plugin from this site.
└► http://bassistance.de/jquery-plugins/jquery-plugin-validation/
It requires jQuery 1.3.2 or 1.4.2 which can be downloaded from here.
└► http://jquery.com/
(Default download option for production is all you need.)
Open your header.php file and add the following in between your <head> </head> tags
<script language="javascript" type="text/javascript" src="PATH TO JS FOLDER/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="PATH TO JS FOLDER/jquery.validate.js"></script>
jQuery can be called from class= for each form element but I didn't want to hard code all that into business_logic.php so all the jQuery form rules are in a separate js file.
<script language="javascript" type="text/javascript" src="PATH TO JS FOLDER/jquery.form.rules.js"></script>
The form does need an id= which DaDaBIK already has in the function build_form section of business_logic.php (line 491)
Example (line 515): $form .= "<form id=\"dadabik_main_form\" name=\"contacts_form\" method=\"post\" action=\"".$action."?table_name=".urlencode($table_name)."&function=".$function;
But since this is used in all forms (insert, update, search etc..) you could run into trouble if you had the same form elements in an "update" form and a "search" form and validation was only needed for the "update" form. So what I did was add IF statements for the different form types to change the id= as needed.
Example for form type update:
(This replaces line 515 above.)
if ( $form_type == "update" or $form_type == "ext_update") {
$form .= "<form id=\"update\" name=\"contacts_form\" method=\"post\" action=\"".$action."?table_name=".urlencode($table_name)."&function=".$function;
}
You can add IF statements for the other forms types (insert, search etc.) below this one to suit your needs.
Below is an example of the form rules used in the update form from my demo site. This would be placed inside the jquery.form.rules.js file.
$(document).ready(function() {
$("#update").validate({
rules: {
date_received: {
required: true,
date: true
},
received_by: {
required: true
}
},
messages: {
date_received: {
required: "Date received is required",
date: "Please enter a valid date."
},
received_by: {
required: "Received by is required"
}
}
});
})
Note: The date_received and received_by are element names in my form/database and are just an example.
You can add some style to your validation too. Below is what I added to my CSS style sheet.
label.error { float: none; color: red; padding-left: 0.5em; vertical-align: middle; font-size: 0.875em; font-style: italic;}
The element label and class error are the default values in jquery.validate.js and are dynamically created by the script, no need to add anything to your form.
Below is jQuery form validation in action when the form is saved without filling in all the required fields:
And here is an example of one of the form fields with partial information. jQuery form validation catches this and gives you the appropriate message.
Hope you find this useful / helpful.
My DaDaBIK Demo: http://dadabik.kicks-ass.net