It appears that the act of clicking is being hindered by a state

Question

It appears that the act of clicking is being hindered by a state

I am using directives to validate user input upon blur events. You can view the code in action on this plunkr:

http://plnkr.co/edit/avEJ2xfLfz6ihM3DwLyB?p=preview (The first field validates email addresses and the second field takes 'yes' as valid input)

While the validation is working, there seems to be an issue where the allowValidation() function needs to be triggered twice when clicking the submit button.

After some investigation, I found that there might be a conflict between the blur event and the button click event; it appears that when one of the text fields has an ongoing blur event, the button only registers the blur instead of the click.

Is there a way to prioritize the click event over the blur event? I am calling the validation function on both events.

javascript angularjs angularjs-directive

Answer 1

Answer №1

During my testing, I didn't encounter any issues with your code. However, if you come across a situation where the blur event and button click conflict, one solution could be to use a variable to track when validation is triggered and reset it once validation is complete.

Here's how you can implement this in the linking function of your directive:

// Keep track of validation in progress
var validationInProgress = false;

function doValidation() {
    validationInProgress = true;
    // Validation logic here
    if (EMAIL_REGX.test(elm.val())) {
        ctrl.$setValidity('emails', true);
    } else {
        ctrl.$setValidity('emails', false);
    }

    // Reset after validation is done
    // This should be the last statement in this function
    validationInProgress = false;
}

Once this setup is complete, before calling doValidation(), check if there is already a validation in progress:

elm.bind('blur', function () {
    if (!validationInProgress) {
        scope.$apply(doValidation);
    }
});

scope.$on('kickOffValidations', function () {
    if (!validationInProgress) {
        doValidation();
    }
});

For reference, here is a link to a Plunkr showcasing the updated code: Plunkr.

Answer 2

During my testing, I didn't encounter any issues with your code. However, if you come across a situation where the blur event and button click conflict, one solution could be to use a variable to track when validation is triggered and reset it once validation is complete.

Here's how you can implement this in the linking function of your directive:

// Keep track of validation in progress
var validationInProgress = false;

function doValidation() {
    validationInProgress = true;
    // Validation logic here
    if (EMAIL_REGX.test(elm.val())) {
        ctrl.$setValidity('emails', true);
    } else {
        ctrl.$setValidity('emails', false);
    }

    // Reset after validation is done
    // This should be the last statement in this function
    validationInProgress = false;
}

Once this setup is complete, before calling doValidation(), check if there is already a validation in progress:

elm.bind('blur', function () {
    if (!validationInProgress) {
        scope.$apply(doValidation);
    }
});

scope.$on('kickOffValidations', function () {
    if (!validationInProgress) {
        doValidation();
    }
});

For reference, here is a link to a Plunkr showcasing the updated code: Plunkr.

It appears that the act of clicking is being hindered by a state

Answer №1

Similar questions

using a single controller to manage multiple pages

Error: The webpage you were looking for in the lobby cannot be found due to a django-channels routing

The Chrome browser allows interaction between two separate divs, where a button located in one div can impact

What is the best way to retrieve an ng-model parameter within a controller?

Eliminating the dynamic element in jQuery causes disruption to the ViewContainerRef container

Is there anyone out there who has successfully imported a model from the three.js editor?

Postpone an automatic action in React

Has every AJAX async request been completed successfully?

What are the steps to create a class diagram for a NodeJS application?

Puppeteer will not navigate to chrome://version when running in headless mode

React JS - Sending props from Dev and Build to App component

Can you explain the functioning of knockout container less syntax? (does it have any drawbacks?)

Place a Three.js scene within a jQuery modal dialogue box

What is the method for retrieving an attribute's value from an object that does not have key-value pairs?

Creating bulk entries with associated tables in Sequelize and ensuring that duplicates are not created

Decode a JSON string that has already been encoded

What impact does the size of HTML have on my JavaScript (especially in relation to page loading speed)?

Is it possible to use a full-width material-ui Button inside a Badge component?

Is there a different option besides using the scale() function in CSS for transforming elements

Issue with reflect metadata in Next.js edge runtime causing functional problems