More information about the Underscore mailing list

[_] Form validation - Floating errors

Drew Pearce drew at sulis-interactive.co.uk
Thu Aug 18 15:51:36 BST 2016

Hi _

I've got a slight problem with an apply form, I'm using form validation 
that works fine. I wanted to display all the error messages at the 
bottom of the page or a floating box to show customers what they missed, 
not just text next to the form elements. Idealy I would like to return 
to the first error at the top of the form.

I can display the error id <div id="app_title"  ></div> which was 
"select id" but only one div id works on the page. Here's the code for 
one of the form elements.

                         <div class="formcontentrow"><div 
class="formcontentlabel">Title</div><div class="formcontentinput">
                         <select id="app_title" name="app_title" 
type="text" >
                         <option value="" selected="selected">--</option>
                         <option value="Mr">Mr<?php echo 
$_POST['app_title']; ?></option>
                         <option value="Miss">Miss<?php echo 
$_POST['app_title']; ?></option>
                         <option value="Mrs">Mrs<?php echo 
$_POST['app_title']; ?></option>
                         <option value="Ms">Ms<?php echo 
$_POST['app_title']; ?></option>
                         <option value="Dr">Dr<?php echo 
$_POST['app_title']; ?></option>
                         <option value="Prof">Prof<?php echo 
$_POST['app_title']; ?></option>
                         </select></div></div>

jQuery for displaying errors:
                 jQuery("#app_title").validate({
                     expression: "if (VAL) return true; else return false;",
                     message: "<a>Please enter a Title</a>"
                 });

validate.js

(function(jQuery){
     var ValidationErrors = new Array();
     jQuery.fn.validate = function(options){
         options = jQuery.extend({
             expression: "return true;",
             message: "",
             error_class: "ValidationErrors",
             error_field_class: "ErrorField",
             live: true
         }, options);
         var SelfID = jQuery(this).attr("id");
         var unix_time = new Date();
         unix_time = parseInt(unix_time.getTime() / 1000);
         if (!jQuery(this).parents('form:first').attr("id")) {
             jQuery(this).parents('form:first').attr("id", "Form_" + 
unix_time);
         }
         var FormID = jQuery(this).parents('form:first').attr("id");
         if (!((typeof(ValidationErrors[FormID]) == 'object') && 
(ValidationErrors[FormID] instanceof Array))) {
             ValidationErrors[FormID] = new Array();
         }
         if (options['live']) {
             if (jQuery(this).find('input').length > 0) {
                 jQuery(this).find('input').bind('blur', function(){
                     if (validate_field("#" + SelfID, options)) {
                         if (options.callback_success)
                             options.callback_success(this);
                     }
                     else {
                         if (options.callback_failure)
                             options.callback_failure(this);
                     }
                 });
                 jQuery(this).find('input').bind('focus keypress click', 
function(){
                     jQuery("#" + SelfID).next('.' + 
options['error_class']).remove();
                     jQuery("#" + 
SelfID).removeClass(options['error_field_class']);
                 });
             }
             else {
                 jQuery(this).bind('blur', function(){
                     validate_field(this);
                 });
                 jQuery(this).bind('focus keypress', function(){
                     jQuery(this).next('.' + 
options['error_class']).fadeOut("fast", function(){
                         jQuery(this).remove();
                     });
jQuery(this).removeClass(options['error_field_class']);
                 });
             }
         }
         jQuery(this).parents("form").submit(function(){
             if (validate_field('#' + SelfID))
                 return true;
             else
                 return false;
         });
         function validate_field(id){
             var self = jQuery(id).attr("id");
             var expression = 'function Validate(){' + 
options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') 
+ '} Validate()';
             var validation_state = eval(expression);
             if (!validation_state) {
                 if (jQuery(id).next('.' + 
options['error_class']).length == 0) {
                     jQuery(id).after('<span class="' + 
options['error_class'] + '">' + options['message'] + '</span>');
jQuery(id).addClass(options['error_field_class']);
                 }
                 if (ValidationErrors[FormID].join("|").search(id) == -1)
                     ValidationErrors[FormID].push(id);
                 return false;
             }
             else {
                 for (var i = 0; i < ValidationErrors[FormID].length; i++) {
                     if (ValidationErrors[FormID][i] == id)
                         ValidationErrors[FormID].splice(i, 1);
                 }
                 return true;
             }
         }
     };
     jQuery.fn.validated = function(callback){
         jQuery(this).each(function(){
             if (this.tagName == "FORM") {
                 jQuery(this).submit(function(){
                     if 
(ValidationErrors[jQuery(this).attr("id")].length == 0)
                         callback();
                     return false;
                 });
             }
         });
     };
})(jQuery);

I've been trying to echo "app_title" also but it doesn't seem to work. 
Has anyone done much of this type of form validation work or recommend one?

Regards Drew