Question

我正在使用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类添加到elment（s）中。即使我从服务器获得成功结果，我似乎总是到addFailureCssClassToField。

解

万一有人碰到这个帖子，这就是我提出解决方案的方法。

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

我已经更新/清理了插件代码本身，所以我的行号将会关闭。也就是说，在第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。我也传入了field元素（jQuery对象）来渲染。

Answer 1

以防万一有人遇到这个问题，这就是我提出解决方案的方式。

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

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

jquery

def changeHep(n):

    out =[]
    out.append(n)

    if (n < 0):
        print(0)
    elif (n <= 1):
        print(n)
    else:
        changeHep(n // 17)
        x = (n % 17)
        if (x < 10): 
            print(x)
        if (x == 10):
            print("A")
        if (x == 11):
            print("B")
        if (x == 12):
            print("C")
        if (x == 13):
            print("D")
        if (x == 14):
            print("E")
        if (x == 15):
            print("F")
        if (x == 16):
            print("G")

changeHep(2834918)

因为我收到了成功的响应，所以我需要致电onFieldSuccess。我还要传入field元素（jQuery对象）以呈现。

Bootstrap + jQuery validationEngine在onFieldSuccess上进行自定义ajax验证调用以更新反馈

1 个答案: