How can I enable my button when 'email' field is valid?

Question

I did this function so that the form button enables when the inputs are different from empty, but I don't know how to do so that in the #email ID the input, in addition to being different from empty, must necessarily contain the character '"@" or the strings "@ gmail.com", "@ hotmail.com".

This is the function

$(function () {
$('#button').attr('disabled', true);
$('#textarea, #email, #name').change(function () {
    if ($('#name').val() != '' && $('#email').val() != '' && $('#textarea').val() != '') {
        $('#button').attr('disabled', false);
    } else {
        $('#button').attr('disabled', true);
    }
});

});

This is the HTML

<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
                <span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
                <br>
                <span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
                <br>
                <span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>    
                <span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
                <br>
                
                <div id="button-container">
                <button type="submit" id="button" disabled="disabled"></button>
                </div>
              </form>

score 1 · Accepted Answer · answered Jun 17 '21 at 18:49

Use a regex and test whether the value of the email input field matches it.

const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$(function() {
  $('#button').attr('disabled', true);
  $('#textarea, #email, #name').change(function() {
    if ($('#name').val() != '' && re.test($('#email').val()) != '' && $('#textarea').val() != '') {
      $('#button').attr('disabled', false);
    } else {
      $('#button').attr('disabled', true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
  <span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
  <br>
  <span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
  <br>
  <span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>
  <span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
  <br>

  <div id="button-container">
    <button type="submit" id="button" disabled="disabled">Submit</button>
  </div>
</form>

How can I enable my button when 'email' field is valid?

1 Answers1