More information about the Underscore mailing list

[_] Form validation - Floating errors

Mike Karthauser mikek at brightstorm.co.uk
Thu Aug 18 16:01:10 BST 2016

Hi Drew
I replied to your post on this subject last week with the suggestion that you use a more recent validate script because yours is 7 years old.

Heres my post again 

> If your validation script is 2009 then i suspect you are having some issues with it and the version of jQuery you are using.
> 
> WRTT i’d switch to jQuery Validate 
> https://jqueryvalidation.org/ <https://jqueryvalidation.org/> <https://jqueryvalidation.org/ <https://jqueryvalidation.org/>>
> 
> and look at using a more recent version of jQuery.
> 
> If you are validating a php form you’ll also want to ensure you have sufficient validation at the backend rather than just relying on the js. otherwise with js off, then anything can get posted through your form.


Switch onto that and if you get any issues you should be able to get help via stack overflow.

Regards
Mike

> On 18 Aug 2016, at 15:51, Drew Pearce <drew at sulis-interactive.co.uk> wrote:
> 
> 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
> -- 
> underscore_ list info/archive -> http://www.under-score.org.uk/mailman/listinfo/underscore

....................................
Mike Karthäuser
Director, Brightstorm Ltd.

1, Brewery Court
North Street
Bristol
BS3 1JS

mike at brightstorm.co.uk <mailto:mikek at brightstorm.co.uk>
www.brightstorm.co.uk <http://www.brightstorm.co.uk/>
+44(0) 7939252144
....................................