根据有效电子邮件删除提交按钮类别答案

【问题标题】：Remove class of submit button based on valid email根据有效电子邮件删除提交按钮类别
【发布时间】：2019-09-23 14:08:27
【问题描述】：

我有一个取消订阅页面的提交按钮，当用户输入有效的电子邮件时，我想删除按钮的“禁用”类。到目前为止，我已经根据“输入”切换类，但我希望用户必须输入有效的电子邮件才能删除“禁用”类。我正在使用 jquery 验证进行验证我只是不确定如何使用 jquery 验证输入来设置按钮类切换。有什么想法吗？

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 验证：

($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.'
            }
        }
    });
}

【问题讨论】：

我不明白你在问什么。这是一个可以帮助你的SO。 stackoverflow.com/questions/46155/…
感谢您的链接 :)....我让 jquery validate 能够按预期验证表单。页面登陆的提交按钮被“禁用”。当用户输入有效的电子邮件时，我想删除“禁用”类而不是“输入”类。
我不确定，但那只是 document.getElementById(unsubscribe-submit).classList.remove('disabled');

标签： javascript jquery html css

【解决方案1】：

由于您已经在使用 HTML 输入类型“电子邮件”，您可以利用现代浏览器的集成表单验证。在输入元素上调用checkValidity() 将告诉您其当前值是否被浏览器视为有效或无效。使用它来删除或添加类到按钮。在这个演示中，我还展示了如何添加/删除 disabled 属性。最好只使用一个类，因为即使它具有禁用的类，您仍然可以单击该按钮。

$(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>

【讨论】：

【解决方案2】：

您甚至不需要 JavaScript 来更改带有 HTML5 验证的按钮。使用输入电子邮件并将其设置为必需。当它无效时，表单是无效的，您可以定位按钮来设置您的样式

form:invalid button {
  color: red;
}

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

【讨论】：