Checkout: force password length

dariodario Member
Hello
Which is the fastest way to force the user to enter at least a 8-digits password when he wants to save his data in the checkout page? I see in the markup the following:
<input type="password" id="new_customer_password" name="new_customer_password" minlength="8" placeholder="Passwort" autocomplete="new-password" class="fc-form-control fc-form-control--new-customer-password" data-fc-required="" >
but actually I'm free to save a shorter password.

Thanks

Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    @dario,

    The minlength value you're seeing there is a fairly new addition to HTML form validation - so there really isn't much in the way of browser support just yet.

    For adding a required minimum length, your best bet would probably be to add some custom checkout validations to require that the password be a certain length. You can see information on custom validations here: https://wiki.foxycart.com/v/2.0/checkout#adding_custom_validation_to_your_checkout
  • dariodario Member
    edited January 2015
    Ok
    is there an easy way to show some error with the same style of FC existing validation? I saw the function FC.util.addError()...can this function or some other be used to show custom errors inside the checkout-submit event? Or do I have to add div and style them by hand?
  • fc_adamfc_adam FoxyCart Team
    edited January 2015
    @dario,

    Yeah - that would allow you to trigger the error bar up the top - but not the error highlighting. Something like this should cover what you need:
    FC.util.addError('new_customer_password', '');
    FC.util.notifyErrors();
    jQuery('[name="new_customer_password"]').trigger("focusout.fc", {validateNow: true})
    You could also edit the new password error message in your language section of your administration, and change it to include the required length of the password too.
  • Hi @fc_adam
    Actually that code handled in "checkout-submit" event does not show any errors (the submission is blocked but no warnings are shown, take a loot at https://mycs.io )...is there any doc for these functions somewhere?
  • fc_adamfc_adam FoxyCart Team
    @dario,

    Sorry - in my proof of concept testing, I didn't notice that when triggering this with a password present, the required input handlers cleared the error that your custom validation triggered. I'm going to speak to some other team members and get back to you as soon as possible.
  • hello @fc_adam, any news from the team?
    thanks
  • winstonwinston FoxyCart Team
    @dario

    I dug into this for awhile this morning and... you're right. Not easy. I've logged a bug. Basically, everything I did would immediately be overriden by our internal validation logic, which is merely checking to confirm the input has a value. You can do the submit check easily enough, but I understand that's pretty awful from a user standpoint.

    We have a couple internal functions in our JS that if we rethink them a bit should be able to be made public and they'd be perfect for this.

    One thing you could do is just visually display an error state (all error styling happens via CSS classes on the input's parent element) and then use the submit checkout validation to actually block the loading. Let me know if you want some example code for that, I think what I built could be modified for those purposes.
  • thanks @winston

    yes, if you could share some code it would be very helpful
  • +1

    I am having a very difficult time trying to conditionally make an optional field required.

    Sure, I can monitor checkout-submit and return false where necessary, but it is currently quite tricky getting a conditionally required field to follow the same UX pattern (onblur, focusout, etc) as those marked "required" in FC Admin by default, vs. those changed to "optional", later to be forcibly required via JavaScript.

    Say I want to capture address, but only if FC.json.total_order > 0. Here's a slightly modified excerpt from the docs, but it seems to have no effect whatsoever.
    FC.json.required_fields.push('billing_address1');

    FC.json.config.template_config.custom_checkout_field_requirements['billing_address1'] = "required";
    I've coupled this with @fc_adam's suggestion above, as well as data-fc-required on the input in question, etc, all with little luck.

    What I have been able to get working is technically functional, but the UX is pretty rough.
  • fc_adamfc_adam FoxyCart Team
    @pixelchutes,

    Could you confirm the store this relates to? I know you've probably mentioned it in another thread - but I can't seem to find it just now.
  • @fc_adam,

    I have whispered the store_id to you.
  • fc_adamfc_adam FoxyCart Team
    @pixelchutes,

    Looks like you've got some fairly complex logic there, but I can see what you're trying to do. After some testing on my test store, I can also see the issue you're bumping into here. We need to make some adjustments to our logic to make it check the required_fields array on validation rather than just using in on page load - which will allow for dynamic changes like you're wanting to do.

    For now though - this might be a cleaner way for you to approach it:
    FC.client.on("render.done", function() { 
    if (FC.json.total_order > 0) {
    $("[name='billing_address1']").attr("data-fc-required", "");
    }
    });
    What that does is basically adds the data-fc-required attribute to the billing_address1 field if the total_order is greater than 0 on every render of the page. The data-fc-required attribute should make that dynamically include the field in the default validations.

    I'll add some additional notes to the ticket on our side relating to the validations improvements.
  • Exactly! I was trying to include a few "conditionally required" fields and have it work just as if they were marked required in the store's config, but the UX is disconnected from the default handling.

    I will explore your recommendation above, it does seem far simpler than how I ended up getting it to work.

    Thank you @fc_adam
  • dariodario Member
    Hello
    I was wondering if someone come up with an easy way to show some error with the same style of FC existing validation (in my case I would need to force the password of at least 8 digits)

    Thanks

  • fc_adamfc_adam FoxyCart Team
    @dario,

    Unfortunately not yet - but we were discussing your query just yesterday amongst the team, looking at the best way to alter our javascript to make it easier. Hopefully we'll have an update for you about that soon.
  • dariodario Member
    Hello @fc_adam, still no news about the feature?
  • Hey @fc_adam,

    I just ran into a very similar issue discussed in this thread.

    When a user inputs a password that is not long enough, and tries to "Place Order" it does nothing, and provides no warning.

    Is there a solution to add a warning if the password is not long enough? Or to completely eliminate the minimum password requirement?

  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    Could we confirm which browser you're experiencing this in please?
  • EpotratzEpotratz Member
    edited November 2016
    @fc_adam
    Latest 64-bit chrome browser
  • fc_adamfc_adam FoxyCart Team
    edited November 2016
    @Epotratz,

    Thanks for confirming. I've created a ticket to look into handling this validation natively, as you're right that it's confusing that it doesn't show an error state like the other fields. In Chrome, you should be seeing a small contextual prompt if the password doesn't meet the minimum length though as part of their native UI.

    For now - you could remove that attribute from the password field entirely - the following should work, pasted into the custom footer of your store's FoxyCart administration configuration page:
    {% if context == "checkout" %}
    <script>FC.client.on("render.done", function() {
    $("#new_customer_password").removeAttr("minlength");
    });</script>
    {% endif %}
  • Hey @fc_adam,

    I dropped that code into the custom footer, and it produced this error upon checkout:

    There was an error displaying this content. It's possible the store you're using has a misconfigured template. We've sent an email to the store owner to let them know about the issue so they can resolve it.
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    I'm really sorry - I had a missing quotation on the first line. I've just updated the code above if you want to grab it again.
  • Works great! Thanks.
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    Quick update - we've introduced native error handling around the password minimum length now - so it will provide a visible error to customers if they don't enter at least 8 characters in the password.
  • @fc_adam Ok, but will our custom code above still work to allow any length of password?
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    Our checkout validations will now do a hard error if the customers new password is less than 8 characters. The customisations discussed previously will remove the HTML5 minimum length attribute, but we now validate it both in our javascript and serverside, so it's a hard requirement now for new passwords. Existing passwords entered to login aren't validated for lengths.
  • @fc_adam Do I need to remove the customization or change anything?
  • fc_adamfc_adam FoxyCart Team
    @Epotratz,

    It's optional. The validations will still apply without it, but if you undo the customisation, then the HTML5 validations will apply as well as the respective browser supports. Ultimately it'll work fine without it though.
Sign In or Register to comment.