Custom FIeld Validation

freshjonesfreshjones Member
in Help edited August 28
I'm trying to figure out how to validate my custom form field. I'm able to follow the example on the website, but that only pops open an alert. I'd rather have it highlight the fields error class and display the error notification bar on the top of the page.

can you provide a basic example of how to make this happen?

the following only *sort* of works, in that it will trigger the error if the field is "dirty" meaning I've focused on the field and input something and then removed all characters from the field. Then it will trigger the error class, but if the field is "pristine" meaning it has never been touched, then the error never occurs, so I must be missing a critical component.

thanks for any help, i removed all of my custom error logic, so in theory this should just always trigger an error on the Customer_Ship_Account field, but only does so if its dirty.
FC.client.on("checkout-submit", function() {

FC.util.addError('Customer_Ship_Account', '');
FC.util.notifyErrors();
FC.checkout.updateErrorDisplay($("#Customer_Ship_Account")[0], true);

return false;

});
Comments
  • marijamarija FoxyCart Team
    Hi @freshjones

    Thanks for reaching out. Sorry to hear that field isn't erroring the way you expect.

    I took a look at your FoxyCart admin and I'm wondering if there's a specific reason you're adding the custom field directly into your checkout. We recommend that you create custom checkout fields through the template configuration settings in the "Add custom form fields to your checkout" as outlined here: https://wiki.foxycart.com/v/2.0/checkout?#adding_custom_checkout_fields

    If that's the only modification you've made to the checkout template, you should change back to the Responsive option on the template.

    Generally that advice applies to most fields that need to be added to the checkout, but there may be another reason you're doing it directly in the checkout template, just let us know.

    If you place it there as you have it instead of the checkout template (just cut it out and paste it in the config/add custom form fields/custom checkout fields), the field will be highlighted and the bar at the top will include that error in the count on the form.

    Would you mind sending a link to the instructions you used to validate the custom field? I just want to take a look at that to see if we can improve on that.
  • ok thanks for that, i see what you're doing there, which is just roll your own error notification with jquery, and thats fine if thats how FC recommends doing validation beyond required fields. I was hoping for a more concise solution that would tie into FC validation methods already in place.

    Just to reiterate, this bit comes very close, I feel like I must be missing something critical because it only triggers after its been focused and unfocused.


    FC.client.on("checkout-submit", function() {

    FC.util.addError('Customer_Ship_Account', '');
    FC.util.notifyErrors();
    FC.checkout.updateErrorDisplay($("#Customer_Ship_Account")[0], true);

    return false;

    });


    as to where I got the code, I looked through the foxycart-checkout.js file, particularly the checkCustomerEmail function, its seems to me like that method looks for a valid email, and if it is not valid then the following logic is applied:

    FC.util.addError('customer_email', '');
    FC.util.notifyErrors();
    checkout.updateErrorDisplay(this, true, checkout.renderLoginRegister);
    next();


    which is roughly what I have in my custom validation with the exception of two things, 1) my function is not async and checkCustomerEmail is, and 2) my function does not provide a twig fallback in updateErrorDisplay and the checkCustomerEmail function provides checkout.renderLoginRegister as a fallback.

    I thought I had tried async mode, but I noticed you are not passing any params through next(), and I think I was passing next(true), maybe thats it?

    thanks

  • fc_adamfc_adam FoxyCart Team
    @freshjones,

    Sorry for the confusion and frustration here. The approach you're taking is indeed along the same lines that we do with our native validations - but unfortunately the javascript isn't as flexible as it should be in terms of supporting extra validations for fields in the same native approach. It's something we have flagged for improvement in the future - so that you could add in custom logic that dictates whether a field is valid or not.

    As it stands - the default validations for required fields can get in the way, clearing out any custom error states you may have applied if they consider a field to be valid.

    To jump back a little:
    the following only *sort* of works, in that it will trigger the error if the field is "dirty" meaning I've focused on the field and input something and then removed all characters from the field. Then it will trigger the error class, but if the field is "pristine" meaning it has never been touched, then the error never occurs, so I must be missing a critical component.
    Are you by chance loading the checkout and then triggering the checkout submit straight away? If so - that would lead to the experience you're describing. We have some logic on the checkout to prevent it from prematurely triggering validation errors. Essentially - if you load up the checkout and just start clicking or tabbing between fields - if it started throwing validation errors it felt a little harsh. Instead, we wait until the page has been interacted with in some way - such as typing into a field (presumably the email input for a normal checkout), and from that point on fields are validated.

    For what you described in your first post, with the minimal code in the checkout-submit event - if you first enter an email address and then submit the checkout - you should see your error display for the account field, even though it hasn't been interacted with.

    With some work-arounds, it's possible to get fairly close now - and I'll whisper you some details on how you could achieve that with your set up.
Sign In or Register to comment.