Question

我有一个关于parsley.js v2.0.0和远程验证库的问题。

我想自定义远程验证字段，但我不知道如何正确显示从远程源返回的错误消息。

服务器的响应是一个JSON格式化的字符串，以纯文本形式返回，如下所示：

{ "error": "my custom error message" }

这是我的表单输入和脚本：

<input type="text" id="UserLogin" maxlength="32" data-ajax-name="login" data-parsley-remote-options='{ "type": "POST",  "data": { "field": "login" } }' data-parsley-remote-validator="validateUsername" data-parsley-remote="1" data-parsley-trigger="focusout" name="data[User][login]" data-parsley-id="2315">

<script>
jQuery('#UserLogin').parsley().addAsyncValidator(
  'validateUsername', function (xhr) {
    return 200 === xhr.status;
    return 404 === xhr.status; 
  }, '/api/validationMethod'
);
</script>

在欧芹错误容器中，默认消息＆＃34;此值似乎无效＆＃34;显示来自pattern属性，但不显示来自服务器的响应。我怎样才能做到这一点？

Answer 1

使用ParsleyUI方法解决了问题。

<input type="text" id="UserLogin" maxlength="32" data-ajax-name="login" data-parsley-remote-options='{ "type": "POST",  "data": { "field": "login" } }' data-parsley-errors-messages-disabled="1" data-parsley-remote-validator="validateUsername" data-parsley-remote="1" data-parsley-trigger="focusout" name="data[User][login]" data-parsley-id="2315">

<script>
jQuery('#UserLogin').parsley().addAsyncValidator(
  'validateUsername', function (xhr) {
       var UserLogin = $('#UserLogin').parsley();
       window.ParsleyUI.removeError(UserLogin,'errorUsername');
       if(xhr.status == '200')
           return 200;
       if(xhr.status == '404')
           response = $.parseJSON(xhr.responseText);
           window.ParsleyUI.addError(UserLogin,'errorUsername',response.error);
  }, '/api/validationMethod'
);
</script>

Answer 2

目前，在欧芹远程中没有标准的内置方式来检索后端错误消息并向前端显示它。您必须自己使用ParsleyUI http://parsleyjs.org/doc/index.html#psly-ui-for-javascript来检索您的ajax调用内容，并将错误附加到验证字段。

Answer 3

进行一些研究，找到更多的本机/防弹解决方案。

解决方案1 

添加异步验证器，并从响应中返回带有错误消息的延迟对象。

import Parsley from "parsleyjs";

Parsley.addAsyncValidator('remoteMessage', function (xhr) {
    const response = xhr.responseJSON;
    if (typeof xhr.responseJSON.error !== 'undefined') {
        return $.Deferred().reject(xhr.responseJSON.error);
    }

    return true;
}, false, {
    type: 'POST'
});

HTML：

<input name="email" type="email" data-parsley-remote="http://127.0.0.1/validate_email.php" data-parsley-remote-validator="remoteMessage" />

缺点是，您对ajax调用没有足够的控制权（例如，您不能取消它们以同时阻止多个请求）。

解决方案2

更多可自定义的ajax调用，其中取消了先前的待处理请求。

import Parsley from "parsleyjs";
import axios from "axios";

const cancelTokenSources = {};
Parsley.addValidator('ajax', {
    validateString: function(value, url, parsleyInstance) {
        const name = parsleyInstance.$element.attr('name');
        const data = new FormData();
        data.append(name, value);

        const cancelTokenSource = cancelTokenSources[parsleyInstance.__id__];
        if (typeof cancelTokenSource !== 'undefined') {
            cancelTokenSource.cancel();
        }

        cancelTokenSources[parsleyInstance.__id__] = axios.CancelToken.source();
        const deferred = $.Deferred();
        axios.post(url, data, {
            cancelToken: cancelTokenSources[parsleyInstance.__id__].token
        }).then(result => {
            if (typeof result.data.error !== 'undefined') {
                deferred.reject(result.data.error);
                return;
            }

            deferred.resolve();
        }).catch(() => {});

        return deferred;
    }
});

HTML：

<input name="email" type="email" data-parsley-ajax="http://127.0.0.1/validate_email.php" />

资源：

parsley.js远程验证响应

3 个答案: