Checkout submit showing wrong input fields

  • Posts: 190
  • Thank you received: 9
8 years 2 months ago #250072

-- HikaShop version -- : 2.6.4
-- Joomla version -- : 3.6.2
-- PHP version -- : 5.5
-- Browser(s) name and version -- : Chrome
-- Error-message(debug-mod must be tuned on) -- : No error

Hi guys,

On most systems i see the fields that are wrong if i click on submit on checkout.
But now i only see a popup.
Is this a configuration is did not see of is this coming in the hikashop 3.

I want to create this but there is no check on right or wrong input field and giving the input field a class.
www.dropbox.com/s/yb5kyqnhl67zaww/Screen...%2014.19.08.png?dl=0

I would love to have 3 classes for input.
Not filled in
Filled in right
Filled in wrong

Is this already possible or not?

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #250088

Hi,

There already is an "invalid" class added to the input with the issue after you see the alert popup with the current version of HikaShop:
take.ms/4JCdi

If you don't see the input field in red, it means that your Joomla template is missing such code in its CSS:
input.invalid {
border: 1px solid #9d261d;
}
That code is in the default Joomla template and should be a default CSS for any Joomla template.

Please Log in or Create an account to join the conversation.

  • Posts: 190
  • Thank you received: 9
8 years 2 months ago #250186

Hi nicolas,

Yes one by one...
So if i entered 3 wrong things i have to send the form 3 times and get the new popup.


Here look at this and click on "verwerk inschrijving" at the bottom:
kraaybeekerhof.nl/academie/opleidingen/n...ividual-registration

Thats an error that is clear.


Is this going to be better in version 3?

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #250200

Hi,

We don't plan on changing that for HikaShop 3. But if you want to change that, you can always modify that behavior. Copy/paste the code:

function hikashopCheckChangeForm(type, form) {
	if(!form)
		return true;
	var varform = null;
	if(typeof(form) == 'object' && form.form)
		varform = form.form;
	else if(typeof(form) == 'string')
		varform = document[form];

	if(typeof(hikashopFieldsJs) == 'undefined' || typeof(hikashopFieldsJs['reqFieldsComp']) == 'undefined' || typeof(hikashopFieldsJs['reqFieldsComp'][type]) == 'undefined' || hikashopFieldsJs['reqFieldsComp'][type].length <= 0)
		return true;

	var d = document;
	for(var i = 0; i < hikashopFieldsJs['reqFieldsComp'][type].length; i++) {
		elementName = 'data['+type+']['+hikashopFieldsJs['reqFieldsComp'][type][i]+']';
		if(typeof(varform.elements[elementName]) == 'undefined')
			elementName = type+'_'+hikashopFieldsJs['reqFieldsComp'][type][i];

		elementToCheck = varform.elements[elementName];
		elementId = 'hikashop_'+type+'_'+ hikashopFieldsJs['reqFieldsComp'][type][i];
		el = d.getElementById(elementId);

		if(elementToCheck && (typeof el == 'undefined' || el == null || typeof el.style == 'undefined' || el.style.display!='none') && !hikashopCheckField(elementToCheck,type,i,elementName,varform.elements)) {
			if(typeof(hikashopFieldsJs['entry_id']) == 'undefined')
				return false;

			for(var j = 1; j <= hikashop['entry_id']; j++) {
				elementName = 'data['+type+'][entry_'+j+']['+hikashopFieldsJs['reqFieldsComp'][type][i]+']';
				elementToCheck = varform.elements[elementName];
				elementId = 'hikashop_'+type+'_'+ hikashopFieldsJs['reqFieldsComp'][type][i] + '_' + j;
				el = d.getElementById(elementId);
				if(elementToCheck && (typeof el == 'undefined' || el == null || typeof el.style == 'undefined' || el.style.display != 'none') && !hikashopCheckField(elementToCheck,type,i,elementName,varform.elements)) {
					return false;
				}
			}
		}
	}

	if(type == 'register') {
		// check the password confirmation field only if we are in selector registration and that the user selected "registration" or "simplified registration", or that the registration is on "all in one page" and that the password confirmation field is there
		var register = d.getElementById('data_register_registration_method0');
		if(!register)
			register = d.getElementById('data[register][registration_method]0');

		var simplified_pwd = d.getElementById('data_register_registration_method3');
		if(!simplified_pwd)
			simplified_pwd = d.getElementById('data[register][registration_method]3');

		if((simplified_pwd && simplified_pwd.checked) || (register && register.checked) || (!simplified_pwd && !register)) {
			// check password
			if(typeof(varform.elements['data[register][password]']) != 'undefined' && typeof(varform.elements['data[register][password2]']) != 'undefined') {
				passwd = varform.elements['data[register][password]'];
				passwd2 = varform.elements['data[register][password2]'];
				if(passwd.value != passwd2.value) {
					alert(hikashopFieldsJs['password_different']);
					return false;
				}
			}
		}

		//check email
		var emailField = varform.elements['data[register][email]'];
		emailField.value = emailField.value.replace(/ /g,"");
		var filter = /^([a-z0-9_'&\.\-\+])+\@(([a-z0-9\-])+\.)+([a-z0-9]{2,14})+$/i;
		if(!emailField || !filter.test(emailField.value)) {
			alert(hikashopFieldsJs['valid_email']);
			return false;
		}
	} else if(type == 'address' && typeof(varform.elements['data[address][address_telephone]']) != 'undefined') {
		var phoneField = varform.elements['data[address][address_telephone]'], filter = /[0-9]+/i;
		if(phoneField) {
			phoneField.value = phoneField.value.replace(/ /g,"");
			if(phoneField.value.length > 0 && !filter.test(phoneField.value)) {
				alert(hikashopFieldsJs['valid_phone']);
				return false;
			}
		}
	}

	return true;
}

function hikashopCheckField(elementToCheck, type, i, elementName, form) {
	if(!elementToCheck)
		return true;

	var d = document, isValid = false;
	if(typeof(elementToCheck.value) != 'undefined') {
		if(elementToCheck.value == ' ' && typeof(form[elementName+'[]']) != 'undefined') {
			if(form[elementName+'[]'].checked) {
				isValid = true;
			} else {
				for(var a = form[elementName+'[]'].length - 1; a >= 0; a--) {
					if(form[elementName+'[]'][a].checked && form[elementName+'[]'][a].value.length > 0)
						isValid = true;
				}
			}
		} else if(elementToCheck.value.length > 0){
			var found = false;
			for(var j in hikashopFieldsJs['regexFieldsComp'][type]) {
				if(hikashopFieldsJs['regexFieldsComp'][type][j] == hikashopFieldsJs['reqFieldsComp'][type][i]) found = j;
			}
			if(typeof(hikashopFieldsJs['regexFieldsComp']) != 'undefined' && typeof(hikashopFieldsJs['regexFieldsComp'][type]) != 'undefined' && found){
				myregexp = new RegExp(hikashopFieldsJs['regexValueFieldsComp'][type][found]);
				if(myregexp.test(elementToCheck.value)){
					isValid = true;
				}
			}else{
				isValid = true;
			}
		}
	} else {
		for(var a = elementToCheck.length - 1; a >= 0; a--) {
			 if(elementToCheck[a].checked && elementToCheck[a].value.length > 0)
			 	isValid = true;
		}
	}

	// Case for the switcher display, ignore check according to the method selected
	// joomla 3 ids are differents than joomla 1.5...
	var simplified_pwd = d.getElementById('data_register_registration_method3');
	if(!simplified_pwd) simplified_pwd = d.getElementById('data[register][registration_method]3');

	var simplified = d.getElementById('data_register_registration_method1');
	if(!simplified) simplified = d.getElementById('data[register][registration_method]1');

	var guest = d.getElementById('data_register_registration_method2');
	if(!guest) guest = d.getElementById('data[register][registration_method]2');

	if(!isValid && ((simplified && simplified.checked) || (guest && guest.checked) ) && (elementName == 'data[register][password]' || elementName == 'data[register][password2]')){
		window.Oby.addClass(elementToCheck, 'invalid');
		return true;
	}

	if(!isValid && ( (simplified && simplified.checked) || (guest && guest.checked) || (simplified_pwd && simplified_pwd.checked) ) && (elementName == 'data[register][name]' || elementName == 'data[register][username]')) {
		window.Oby.addClass(elementToCheck, 'invalid');
		return true;
	}
	if(!isValid) {
		window.Oby.addClass(elementToCheck, 'invalid');
		alert(hikashopFieldsJs['validFieldsComp'][type][i]);
		return false;
	} else {
		window.Oby.removeClass(elementToCheck, 'invalid');
	}
	return true;
}
in the javascript file of your template and modify it according to your needs.
We'll be happy to integrate it in HikaShop 3 if you can provide a clean solution for that but it's not straight forward to handle properly all the cases.

Please Log in or Create an account to join the conversation.

  • Posts: 190
  • Thank you received: 9
8 years 2 months ago #250256

Hi Nicolas,

Thanks!
Well it would be user friendly to check the validations after hitting the tab or leaving the field and give it a valid class.
So a user knows directly if it is good or bad.
Or at least check all fields in submit. Checking one by one is maybe technigal logic but not from user experience point of view if you ask me.
I thought with an ajax checkout this would be also possible in Hika 3

I do not know an other applications that handles the submit and errors like hikashop one by one. Look at Rsform. If i hit submit i see all my the bad stuff with red lines and comment like 'did your forget to fill in your name?'
If i would get one by one i definitely would buy an other form extension :-D

In your form it would be not really difficult because you only validate the Email but it would be nice if you see all at once.

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #250278

Hi,

Well, I completely agree with you that it would be better like you're saying. I'm not arguing about that.
I'm just saying that in order to do it properply, it will require a complete rewrite of the code I gave you and that's not so easy, and we are working on other things for the 3.0. That doesn't mean that we don't want to do it. Just that it won't be for next month :)

Please Log in or Create an account to join the conversation.

  • Posts: 190
  • Thank you received: 9
8 years 2 months ago #250449

Hi Nicolas,

Thanks for agreeing :-)
I thought i was maybe the only one haha

If you want to do the checkout better look at Woocommerce.
The validation of a field is with a tab and after you click on the submit you see all the wrong fields above and are invalid style.

Like this:
www.dropbox.com/s/dyn1aw01tic45x6/Screen...%2016.57.10.png?dl=0

I think a checkout process is number one priority to make it easy.
It can make the difference for buying or not buying.

I hope this will be soon in the new hikashop because for this option i probably have to use Woocommerce now...

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
8 years 2 months ago #250460

Hi,

That's already the kind of direction we took for the new checkout in HikaShop 3.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 1119
  • Thank you received: 114
8 years 2 months ago #250489

Hi,

I wont ask when hika 3 beta be ready cause probably I will get answer "Soon" again :lol:
But any img of new checkout? :whistle:

Thanks

Last edit: 8 years 2 months ago by kyratn.

Please Log in or Create an account to join the conversation.

  • Posts: 190
  • Thank you received: 9
8 years 2 months ago #250502

Hi Jerome,

Thanks for your message!
Well i hope hikashop 3 will be ready soon.
I think this checkout not missing a little bit user friendly so not good to start a new webshop with that ;-)

Is there more known about how Soon is Soon for hikashop 3?

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1778
8 years 2 months ago #250550

Hello !

We're actually working on it so it will be available as soon as possible, we'll probably launch a Beta in few weeks.

Please Log in or Create an account to join the conversation.

  • Posts: 190
  • Thank you received: 9
8 years 2 months ago #250589

Not fully functional yet but here is a begin for me :-)
Sorry for the dutch comments ;-)

www.dropbox.com/s/95ffp7nls5zgkpx/Screen...%2020.57.18.png?dl=0
www.dropbox.com/s/64i69n78qwxooim/Screen...%2020.57.42.png?dl=0

jQuery( document ).ready(function( $ ) {

            // Begin als de cursor een tekstveld verlaat
            $('form input').keyup(function () {

                // Waarde in het teksteveld
                var val = $(this).val();

                // Verwijder spatie aan begin en eind
                var trim = val.trim();

                // Lengte van de waarde
                var chars = trim.length;

                // Doe iets als een invulveld leeg is of het e-mailadres heeft een ongeldige notatie
				if (chars == 0 || ($(this).attr('name') == 'data[register][email]' && !validateEmail(val))) {

                    // Verwijder class
                    $(this).removeClass('goed');
					
					// Voeg class toe
					$(this).addClass('fout');
					
					// Schakel verzendknop uit als er een fout is
					//$('form input[type="submit"]').attr('disabled', 'disabled').removeClass('verstuur');

                    return false;
                }

                if (chars > 0) {
				
					// Stel teller in
                    var fouten = 0;

                    // Verwijder class
                    $(this).removeClass('fout');
					
					// Voeg class toe
                    $(this).addClass('goed');
					
                    // Doorloop elk tekstveld van het formulier
                    $('form input').each(function () {
					
						var inputValue = $(this).val();

                        // Optellen als veld een class 'fout' heeft of niet is ingevuld
                        if ($(this).hasClass('fout') || inputValue.length == 0) {
							fouten++;
                        }
                    });

                    if (fouten == 0) {
                        // Maak verzendknop klikbaar als er geen fouten zijn
                        $('form input[type="submit"]').removeAttr('disabled').addClass('verstuur');
                    }
                }
            });
			
			function validateEmail(email) {
				
				// Valideer e-mailadres
				
				var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				
				if (regex.test(email)) {
					return true;
				}
				
				return false;
			}

        });

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #250640

Hi,

Thank you for your input on that.
As Mohamed said the first beta should be in a few weeks. We actually hope for one or two weeks.

Please Log in or Create an account to join the conversation.

Time to create page: 0.097 seconds
Powered by Kunena Forum