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

问题描述

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

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'
      },
    }
  });

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

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

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

推荐答案

没有所有jQuery验证插件回调选项/函数，当所有字段均有效时无需先单击提交"按钮即可触发.

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

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

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.

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

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
        }
    });

});    

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

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" />

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

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.

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

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

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

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');

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

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屋！