Remove class of submit button based on valid email

Question

I have a submit button for an unsubscribe page, I would like to remove a "disabled" class to the button when user inputs a valid email. As of now I have the class being toggled based on "input" which kind of works but I would rather the user have to input a valid email to remove the "disabled" class. I am using jquery validation for the validation I'm just not sure how to base the buttons class toggle with jquery validate input. Any Ideas?

HTML:

 <div class="form-group">
    <input type="email" class="form-control email-input input-lg" 
    name="email">
 </div>

 <button id="unsubscribe-submit"
   class="disabled">
    <span class="btn-text>Submit</span>
 </button>

jQuery:

$($emailInput).on('input', function() {
    $('#unsubscribe-submit').toggleClass('disabled', this.value.trim().length === 0);
});

jQuery Validation:

($unsubscribeForm.length) {
    $unsubscribeForm.validate({
        errorClass: 'has-error',
        errorElement: 'span',
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: {
                required: 'An email address is required.',
                email: 'Please provide a valid email address.'
            }
        }
    });
}

I dont understand what you are asking for. Here is a SO that could help you. https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript — Patrick Lüthi, Sep 23 '19 at 14:13
thanks for the link :)....I have the jquery validate working to validate the form as expected. The submit button on page landing is "disabled". When the user inputs a valid email I would like to remove the class "disabled" not on "input". — hendy0817, Sep 23 '19 at 14:18
I am not sure but that would be just document.getElementById(unsubscribe-submit).classList.remove('disabled'); — Patrick Lüthi, Sep 23 '19 at 14:21

score 0 · Accepted Answer · answered Sep 23 '19 at 14:22

As you are already using the HTML input type "email", you can make use of modern browsers' integrated form validation. Calling checkValidity() on an input element will tell you whether its current value is regarded as valid or invalid by the browser. Use this to either remove or add the class to the button. In this demonstration, I also showed how to add/remove the disabled attribute. It would be preferrable to simply using a class, because you can still click the button even if it has the disabled class.

$(document.querySelector('input[type="email"]')).on('input', function() {
      // use this to add/remove a class
      $('#unsubscribe-submit')[this.value.length && this.checkValidity() ? 'removeClass' : 'addClass']('disabled');
      // or this to add/remove the disabled attribute
      $('#unsubscribe-submit').attr('disabled', this.value.length && !this.checkValidity());
    });

.disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <input type="email" class="form-control email-input input-lg" name="email">
</div>

<button id="unsubscribe-submit" class="disabled" disabled>
    <span class="btn-text">Submit</span>
 </button>

score 0 · Answer 2 · answered Sep 23 '19 at 14:51

You do not even need JavaScript to change the button with HTML5 validation. Use input email and set it to be required. When it is not valid, the form is invalid which you can target the button to set your style

form:invalid button {
  color: red;
}

<form>
  <input type="email" required>
  <button> submit</button>
</form>

Remove class of submit button based on valid email

2 Answers2