成功 jQuery 验证后启用禁用按钮 [英] Enabling disabled button after successful jQuery validation

问题描述

我有以下代码，其中有 2 个电子邮件输入字段，我需要验证它们是否相同，使用 jQuery validate equalTo 可以成功运行.

<label class="control-label" for="inputEmail"><strong>电子邮件地址</strong></label><div class="控件"><input type="email" name="inputEmail" placeholder="[e-mail]" id="inputEmail" required>
<label class="control-label" for="inputEmailConfirm"><strong>确认电子邮件地址</strong></label><div class="控件"><input type="email" name="inputEmailConfirm" placeholder="[e-mail]" id="inputEmailConfirm" required>

<button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="点我购买">信用卡结帐 &raquo;

成功验证后，我希望启用该按钮，但似乎无法弄清楚如何执行此操作.

 $('#ccSelectForm').validate({规则:{输入邮箱:{要求:真实，电子邮件:真实},输入电子邮件确认:{要求:真实，电子邮件:是的，等于:'#inputEmail'},}});

理想情况下，作为奖励，我想设置表单控件以利用 Bootstrap3 中的验证状态，详见此处 - http://getbootstrap.com/css/#forms-control-validation

小提琴在这里http://jsfiddle.net/4wU5m/

解决方案

没有 jQuery Validate 插件回调选项/函数会在所有字段都有效而没有先点击提交按钮时触发.

您需要创建一个外部 keyup blur 事件处理程序来检查表单的有效性并相应地启用/禁用按钮；每次按下键或离开字段时.

演示:http://jsfiddle.net/p628Y/1/

$(document).ready(function () {$('#ccSelectForm').validate({规则:{输入邮箱:{要求:真实，电子邮件:真实},输入电子邮件确认:{//required: true,//<-- 冗余//email: true,//<-- 多余的等于:'#inputEmail'}//<-- 删除尾随逗号}});$('#ccSelectForm input').on('keyup blur', function () {//在每次按键和模糊时触发if ($('#ccSelectForm').valid()) {//检查表单的有效性$('button.btn').prop('disabled', false);//启用按钮} 别的 {$('button.btn').prop('disabled', 'disabled');//禁用按钮}});});

由于 jQuery Validate 插件动态禁用浏览器的 HTML5 验证，我从您的标记中删除了 required 属性并将 type="email" 更改为 type=文本".(您已经在插件中指定了这些验证规则.)

<input type="text" name="inputEmailConfirm" placeholder="[e-mail]" id="inputEmailConfirm"/>

在使用 equalTo 规则时，您也不需要两次指定所有规则，因为第二个字段必须始终与第一个字段匹配.

<小时>

在上述场景中，您的页面完全依赖于 JavaScript.换句话说，如果没有 JavaScript，按钮将始终处于禁用状态.

如果您有服务器端验证并希望您的页面独立于 JavaScript，您需要从按钮标记中删除 disabled="disabled" 并将其添加到您的JavaScript 就在 DOM 就绪事件处理程序中.

$('button.btn').prop('disabled', 'disabled');

在这种情况下，如果没有 JavaScript，您仍然可以使用一个可用的按钮，而使用 JavaScript，该按钮会在页面加载时以编程方式禁用.

I have the following code where I have 2 email input fields which I need to validate they are the same which is working successfully using jQuery validate equalTo.

<div class="control-group">
 <label class="control-label" for="inputEmail"><strong>Email Address</strong></label>
   <div class="controls">
    <input type="email" name="inputEmail" placeholder="[e-mail]" id="inputEmail" required>
   </div>
    <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong></label>
     <div class="controls">
    <input type="email" name="inputEmailConfirm" placeholder="[e-mail]" id="inputEmailConfirm" required>
    </div>
    </div>
  <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout &raquo; </button>

Upon successful validation I wish to enable the button, but can't seem to figure out how to do this.

 $('#ccSelectForm').validate({
    rules: {
      inputEmail: {
        required: true,
        email: true
      },
      inputEmailConfirm: {
        required: true,
        email: true,
        equalTo: '#inputEmail'
      },
    }
  });

Ideally as bonus I'd like to set the form controls to utilise the validation states in Bootstrap3, detailed here - http://getbootstrap.com/css/#forms-control-validation

Fiddle is here http://jsfiddle.net/4wU5m/

解决方案

There is no jQuery Validate plugin callback option/function that fires when all fields are valid without first clicking the submit button.

You'll need to create an external keyup blur event handler that checks your form for validity and enables/disables the button accordingly; every time a key is pressed or you leave a field.

DEMO: http://jsfiddle.net/p628Y/1/

$(document).ready(function () {

    $('#ccSelectForm').validate({
        rules: {
            inputEmail: {
                required: true,
                email: true
            },
            inputEmailConfirm: {
                // required: true,  // <-- redundant
                // email: true,     // <-- redundant
                equalTo: '#inputEmail'
            }  // <-- removed trailing comma
        }
    });

    $('#ccSelectForm input').on('keyup blur', function () { // fires on every keyup & blur
        if ($('#ccSelectForm').valid()) {                   // checks form for validity
            $('button.btn').prop('disabled', false);        // enables button
        } else {
            $('button.btn').prop('disabled', 'disabled');   // disables button
        }
    });

});    

Since the jQuery Validate plugin disables the browser's HTML5 validation dynamically, I removed the required attribute from your markup and changed type="email" into type="text". (You already have these validation rules specified in the plugin.)

<input type="text" name="inputEmail" placeholder="[e-mail]" id="inputEmail" />
<input type="text" name="inputEmailConfirm" placeholder="[e-mail]" id="inputEmailConfirm" />

You also don't need to specify all the rules twice when using the equalTo rule as the second field must already always match the first.

---

EDIT:

In the above scenario, your page is totally dependent upon JavaScript. In other words, without JavaScript, the button is always disabled.

If you have server-side validation in place and want your page to be independent of JavaScript, you'll need to remove the disabled="disabled" from your button markup and add it to your JavaScript just inside the DOM ready event handler.

$('button.btn').prop('disabled', 'disabled');

In this scenario, without JavaScript, you'll still have a working button, and with JavaScript, the button is disabled programatically on page load.

这篇关于成功 jQuery 验证后启用禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！