Jquery Validate inline for register account page

[sol2010]

Hello Everyone, 

The client register.php page is rather unfriendly in that if someone enters all the data (including passwords and security question answers etc) and presses submit - the form clears all the fields if something (e.g. zipcode) had been missed by the user.

I've literally had customers phone me to say it's too hard to register..... 

So - to resolve this issue, I think it would be a good idea to install something like this jQuery client side validation to validate each required field inline with a little tick for each validation - and of course highlight each field that needs an answer with a little red x so the user knows what to do.

This will prevent the user getting to the end and submitting the form, when they have forgotten one field.

Firstly - why is this not part of the core?

Secondly, hHas anyone done this and if so, please share some insight. 

I would @brian! ask I would, but I believe he's retired and smoking cigars and drinking pina coladas in his rainy English garden (oh happy days!)

Thank you.

Edited April 26, 2022 by sol2010

[sol2010]

OK - well I achieved this myself by modifying the clientregister.tpl template.

Inline validation should really be part of the core.

 

Anyway, here is what I came up with.  Tested and works, but you will need to modify it for your own.  I used the Jquery Validation docs to help - and stack overflow to get the answers to some sticky issues!

The basic concept is to add the following to the clientregister.tpl template.  You will have to manage the element rules / messages to the field NAME of each of your elements (not the .class or #ID but field name! 
    

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
    
<script>
        
    jQuery(document).ready(function() {
      
	jQuery("#frmCheckout").validate({
			  ignore: [], // ignore empty input fields
			  ignore: ".ignore", // allow validation of ignore fields like google captcha
			  ignore: '',
            focusInvalid: false, // zoom to the invalid fields
            invalidHandler: function(form, validator) {
                if (!validator.numberOfInvalids()) return;
                jQuery('html, body').animate({
                    scrollTop: jQuery(validator.errorList[0].element).offset().top - 300
                }, 500);
            },
			
		
      
        // add all your rules
         rules: {
                
				"customfield[123]":{ // add your custom fields - get the id from dev tools inspection
                    required: true,
					minlength: 6,
                    maxlength: 6,
					invitecode: true
                },
				firstname: {
                    required: true,
					minlength: 3,
                    maxlength: 25
                },
                lastname: {
                    required: true,
					minlength: 3,
                    maxlength: 25
                }  // no closing comma on last element
              
        },
			
			// add your messages
            messages: {
				"customfield[123]":{ 
				  required: "This is required",
				  minlength: "The invite code is not correct",
                  maxlength: "The invite code not correct",
				  invitecode: "The Invite Code is incorrect!"
                },

				firstname: {
                    required: "First name is required"
                },

                lastname: {
                    required: "Last name is required"
                 }  // no closing comma on last element
              
            },    
              
            // add the logic

      		// adds classes to the fields			
			errorClass: "error",
            validClass: "checked",

			success: function(label) { // where will the error class be added
               label.html(" ").addClass("checked");
			},
      
      		highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        	}  // no closing comma on last element
      
      		
        }); // close
      
      </script>

		
              

 

You will have to excuse the sloppy looking formatting - my code looks clean, but the html insert code box here on the community appears to have mis-aligned everything.

 

 

Edited April 29, 2022 by sol2010