Bootstrap + jQuery validationEngine 自定义 ajax 验证调用 onFieldSuccess 更新反馈答案

【问题标题】：Bootstrap + jQuery validationEngine make custom ajax validation call onFieldSuccess to update feedbackBootstrap + jQuery validationEngine 自定义 ajax 验证调用 onFieldSuccess 更新反馈
【发布时间】：2015-02-03 17:15:30
【问题描述】：

我正在使用jQuery Validation Engine 插件来验证我的表单。我还使用 Bootstrap 向用户提供给定输入的反馈（成功/失败）。

这是我初始化插件的方式：

jquery

$.validationEngine.defaults.promptPosition = 'inline';

$.validationEngine.defaults.onFieldFailure = function (field) {
    console.log('onFieldFailure called');

    field.parent().removeClass('has-success').addClass('has-error');
    field.nextAll('span').children().removeClass('fa-check').addClass('fa-remove');
};

$.validationEngine.defaults.onFieldSuccess = function (field) {
    console.log('onFieldSuccess called');

    field.parent().removeClass('has-error').addClass('has-success');
    field.nextAll('span').children().removeClass('fa-remove').addClass('fa-check');
};

$form.validationEngine('attach');

我正在使用 CodeIgniter 来处理服务器端的表单。一切都很好。

html/php

<div class="form-group has-feedback">
    <label for="email"><i class="fa fa-asterisk"><span class="sr-only">This field is required</span></i> E-mail Address</label>
    <input type="text" class="form-control" id="email" name="email" 
        data-validation-engine="validate[required, custom[email], ajax[email_exists]]"
        data-errormessage-value-missing="This field is required"
        data-errormessage="Invalid E-mail address"
        value="<?php echo set_value('email'); ?>"
        placeholder="your@email.com">
        <span class="form-control-feedback"><i class="fa fa-remove"></i></span>
        <?php echo form_error('email'); ?>
</div>

这是我的控制器（我如何返回响应）：

php

public function ajax_email_exists() {
    if ($this->user_model->email_exists($this->input->get('fieldValue'))) {
        echo json_encode(array('email', FALSE));
    } else {
        echo json_encode(array('email', TRUE));
    }
}

当用户从电子邮件字段中消失时，我会进行 ajax 调用 email_exists，它也可以正常工作。这就是它的样子。它位于文档中建议的 jquery.validation-engine-en.js 文件中。

jquery

'email_exists': {
    'url': 'path-to-my-script.php',
    'alertTextLoad': '<i class="fa fa-cog fa-spin"></i> Validating, please wait...',
    'alertTextOk': '<i class="fa fa-check-circle"></i> E-mail address is valid',
    'alertText': '<i class="fa fa-exclamation-triangle"></i> That Email-address already exists'
},

验证本身运行良好。我得到了正确的回复 - 我遇到的问题是我似乎无法弄清楚如何使 ajax 调用成功以调用 onFieldSuccess 方法。一旦我模糊了电子邮件字段onFieldFailure 被调用并且我的输入是红色的。 ajax 验证完成后，我无法摆脱无效样式并应用我的有效样式。本质上，调用onFieldSuccess 方法给出正确的反馈。

我的一个想法是也许我需要考虑使用funcCall 来代替？感谢您的宝贵时间和建议！

编辑

我已经更新了我的初始化方法以将 css 类添加到元素中。即使我从服务器返回成功结果，我似乎总是到达addFailureCssClassToField。

【问题讨论】：

标签： jquery-validation-engine

【解决方案1】：

以防万一有人遇到此线程，这就是我想出解决方案的方法。

如前所述，我的所有验证都在/正在正常工作。问题是相应地更新反馈。我无法更新样式以反映正在发生的事情。

我已经更新/清理了插件代码本身，所以我的行号将被关闭。也就是说，在 #1578 行附近，您会发现：

jquery

if (options.showPrompts) {
    // see if we should display a green prompt
    if (msg) {
        methods._showPrompt(errorField, msg, "pass", true, options);
        options.onFieldSuccess(errorField); // Added this line.
    } else {
        methods._closePrompt(errorField);
    }
}

因为我收到了成功响应，所以我需要调用 onFieldSuccess。我还传入要渲染的字段元素（jQuery 对象）。

【讨论】：