Bootstrap + jQuery validationEngine 对 FieldSuccess 进行自定义 aja

Question

我正在使用jQuery验证引擎插件来验证我的表单。我还使用 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来处理服务器端的表单。一切都很好。

网页/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="[e-mail]">
        <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 类添加到 elment（s）。似乎我总是addFailureCssClassToField即使我从服务器获得成功的结果。

Answer 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 对象）。