Clear jQuery validation error message on dropdown value change

[goyalkritika]

I have a dropdown that has two options 1 and 2 .

On selecting 1, there is a foundation validator that is being registered for numeric character check.

Now, if I select option 2 from dropdown, the above validation still exist and I'm not able to save the dialog.

How can I deregister this jQuery validation on dropdown value change?

jQuery code for validation is like this - 

(function($, _$document) {

    "use strict";
    $(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
      selector: "[.showing data-validation=data-sku-numeric-validation]",
      validate: function(el) {

          var expectedLength = 9;
        var value = el.value.trim();

          if (!value.match(/^\d+$/) && !value.match(/\s/)) {
            return "Please enter only numeric values with no white spaces.";
          }

          if (value.length !== expectedLength) {
            return "The field must be exactly " + expectedLength + " numeric characters with no white spaces.";
          }
      }
    });
})($, $(document));

[goyalkritika]

I read certain blogs where it is mentioned to use validator.resetForm() method. 

The question is how can I fetch my validator from the above code? What will it be?

[Raja_Reddy]

Hi @goyalkritika 

The jQuery validation on dropdown value change, you can use the unregister method provided by the foundation registry. However, the specific implementation might depend on how the dropdown change event is handled in your code.Assuming you have an event listener for the dropdown change, you can unregister the validator within that event handler. Here's an example:

// Assuming there is a change event handler for the dropdown

$("#yourDropdownId").change(function() {

    var registry = $(window).adaptTo("foundation-registry");

    // Unregister the validator

    registry.unregister("foundation.validation.validator", {

        selector: "[.showing data-validation=data-sku-numeric-validation]"

    });

    // Optionally, you can reset the form to clear any existing validation messages

    // $("#yourFormId").validate().resetForm();

});

Replace "#yourDropdownId" and "#yourFormId" with the actual IDs or selectors for your dropdown and form.

That this assumes you have a proper event listener for the dropdown change event. If not, you may need to add an event listener or modify the existing one to include the logic for unregistering the validator.aadionally, if you want to fetch the validator to unregister it, you need to keep a reference to it when registering. However, based on the provided code, it seems like the validator is registered anonymously, and there's no direct reference to it. In such cases, using the selector during unregister is a common approach.

Thanks.

[goyalkritika]

Hi @Raja_Reddy 

I have an event listener for dropdown change. In the same I'm doing certain logical changes.

Based on your reply, I did some modifications. But it did not work. Please have a look and suggest if I'm missing something.

(function($, $document) {
    "use strict";
       // Function to handle dropdown change for image list
      function handleDropdownChangeIL() {

          var registry = $(window).adaptTo("foundation-registry");
          registry.unregister("foundation.validation.validator", {
             selector: "[.showing data-validation=data-sku-numeric-validation]"       
          });

        let dropdownValue = $(this).val();
        let multifieldItem = $(this).closest('.imagelistdialog coral-multifield-item');
        if($(multifieldItem).length==0) {
            return;
        }
        let buttonLabel = $(multifieldItem).find("input[placeholder='Button Label']")[0];
        let link =  $(multifieldItem).find(".cmp-teaser__editor-actionField-linkUrl input")[0];
        let text = $(multifieldItem).find(".cmp-teaser__editor-actionField-linkText")[0];

        $(buttonLabel).prop("required", null);
        $(link).prop("required", null);
        $(text).prop("required", null);

        // Set 'required' attribute based on the selected value
        if(dropdownValue === "redirection") {
            $(buttonLabel).prop("required", null);
            $(link).prop("required", true);
            $(text).prop("required", true);
        } else if(dropdownValue === "addtocart") {
            $(buttonLabel).prop("required", true);
            $(link).prop("required", null);
            $(text).prop("required", null);
        } else {
            return;
        }
      }
    $document.on("foundation-contentloaded", function() {
      // Event listener for dropdown change
      $("coral-select[placeholder='Select the type of button']").on("change", handleDropdownChangeIL);
    });
  })($, $(document));

[goyalkritika]

Hi @Raja_Reddy 

I tried this but getting error in js.

[Raja_Reddy · Accepted solution]

Hi @goyalkritika 
Please try below code 

(function($, $document) {
    "use strict";

    // Function to handle dropdown change for image list
    function handleDropdownChangeIL() {
        var registry = $(window).adaptTo("foundation-registry");

        // Corrected selector syntax
        registry.unregister("foundation.validation.validator", {
            selector: ".showing[data-validation='data-sku-numeric-validation']"
        });

        let dropdownValue = $(this).val();

        // Adjusted multifieldItem selector
        let multifieldItem = $(this).closest('.imagelistdialogcoral-multifield-item');

        if ($(multifieldItem).length == 0) {
            return;
        }

        // Your logical changes based on dropdownValue
        // ...

    }

    $document.on("foundation-contentloaded", function() {
        // Event listener for dropdown change
        $("coral-select[placeholder='Select the type of button']").on("change", handleDropdownChangeIL);
    });
})($, $(document));

In the unregister method, the selector syntax seems incorrect. The correct syntax for a class selector is .classname. Replace [.showing data-validation=data-sku-numeric-validation] with .showing[data-validation='data-sku-numeric-validation'].
The selector for finding the multifield Item might need adjustments. If the class selector .image list dialog and coral-multifield-item are part of the same element, you should combine them without a space. 

Thanks.

[pulkitvashisth]

You can deregister the jQuery validation on dropdown value change by using the .off() method in jQuery. This method removes event handlers that were attached with .on().

Here is an example of how you can do it:

$("#yourDropdownId").change(function() {
    if ($(this).val() == "2") { // If the selected value is 2
        $(window).adaptTo("foundation-registry").off("foundation.validation.validator");
    }
});

Please note that this will remove all validators registered with "foundation.validation.validator". If you have other validators registered with this, you might need to re-register them.

Let me know if this works.

[goyalkritika]

Hi @pulkitvashisth 

I tried using .off method. But unfortunately this did not work.

[Kamal_Kishor]

@goyalkritika : You can disable field1 or field2 based on drop-down selection of 1 or 2. That way validation will not trigger on disabled field and you will be able to proceed with your dialog submission.
You can do the disable/enable in the same validation javascript file based on appropriate conditions.
Please let me know if you need more details.
Thanks.