How to manage the submit button state based on email validation results

Other Questions Mailgun
1

I’m using an email validation plugin that functions correctly to verify email addresses. The validation shows a loading indicator and provides messages accordingly. However, I’m seeking assistance with controlling the behavior of the submit button based on the results of the validation.

My objectives are:

  • Disable the submit button if the email validation fails
  • Enable the submit button if the email validation goes through
  • Keep the button disabled while the validation is ongoing

Here’s the code I have for validation:

$('#email_input').email_verifier({
    apiKey: 'your-api-key',
    onLoading: process_in_progress,
    onValid: process_success,
    onError: process_failure,
});

// loading state
function process_in_progress() {
    $('#notification').html("<img src='loader.gif' height='20'/>")
}

// valid email
function process_success(response) {
    $('#notification').html(create_message(response['isValid'], response['suggestion']))
}

// error handling
function process_failure(error) {
    $('#notification').html(error)
}

// create status message
function create_message(isValid, suggestion) {
    if (suggestion) {
        return '<span class="hint">Did you mean <strong>' + suggestion + '</strong>?</span>'
    } else if (isValid) {
        return ''
    } else {
        return '<span class="error">The email address is invalid.</span>'
    }
}

I know I can disable the button like this:

$("#submit_button").prop('disabled', true)

But I’m unsure where to integrate the logic for enabling and disabling the button within my validation functions. Any guidance would be appreciated!

2

I had a similar issue with form validation recently and found that managing button state through a centralized function works better than scattered disable/enable calls. Create a dedicated function to handle button state and call it from each validation callback:

function updateSubmitButton(isEnabled) {
    $('#submit_button').prop('disabled', !isEnabled);
}

function process_in_progress() {
    $('#notification').html("<img src='loader.gif' height='20'/>");
    updateSubmitButton(false);
}

function process_success(response) {
    $('#notification').html(create_message(response['isValid'], response['suggestion']));
    updateSubmitButton(response['isValid']);
}

function process_failure(error) {
    $('#notification').html(error);
    updateSubmitButton(false);
}

This approach makes it easier to debug and modify button behavior later. You might also want to disable the button initially when the page loads to prevent premature submissions before any validation occurs.

3

To manage the submit button’s state effectively, you should integrate the button’s enable/disable logic into your validation functions. Start by disabling the button in the process_in_progress function. This ensures that the button is not clickable while validation is ongoing. In the process_success function, enable the button only if the email is valid by checking the isValid parameter from the response. Keep the button disabled during any failure by retaining that logic in process_failure. Here’s a revised snippet:

function process_in_progress() {
    $('#notification').html("<img src='loader.gif' height='20'/>");
    $('#submit_button').prop('disabled', true);
}

function process_success(response) {
    $('#notification').html(create_message(response['isValid'], response['suggestion']));
    $('#submit_button').prop('disabled', !response['isValid']);
}

function process_failure(error) {
    $('#notification').html(error);
    $('#submit_button').prop('disabled', true);
}

This ensures your button behaves as required throughout the validation process.

4

just add the button controls directly in your callback functions. in process_in_progress disable it, in process_success enable only when response.isValid is true, and keep disabled in process_failure. something like $('#submit_button').prop('disabled', !response.isValid) works perfect for the success callback.