【问题标题】:Parsley.js - Append label value to the error messageParsley.js - 将标签值附加到错误消息中
【发布时间】:2013-12-16 10:13:12
【问题描述】:

有没有办法获取输入字段的引用并将其值或标签附加到错误消息中?

默认情况下,错误消息类似于“此值是必需的”。

我想用输入标签更改“此值”,以便获得更好的错误消息。

$( '#form' ).parsley({
    messages: {
        required: 'LABEL VALUE HERE + Error message'
    } 
});

下面是一个样板文件,可帮助您入门: http://jsfiddle.net/82utb/

【问题讨论】:

    标签: javascript jquery parsley.js


    【解决方案1】:

    您可以在每次标签或值更改时销毁欧芹并使用新的错误消息重新初始化。

    http://jsfiddle.net/doodlebot/yhcY6/

    这是 JS:

    function updateMessage($target) {
        var inputValue = $target.val();
        var id = $target.attr('id');
        var valueOrLabel = inputValue ? inputValue : id;
    
        $('#form').parsley('destroy');
        $('#form').parsley({
            messages: {
                required: valueOrLabel + ' Error message',
                minlength: valueOrLabel + ' is too short'
            } 
        });
        $('#form').parsley('isValid');
    }
    
    updateMessage($('#name'));
    
    $('input[type="text"]').on('keyup', function() {
        updateMessage($(this));
    });
    

    还有 HTML:

    <form id="form" action="#">
        <div class="row">
            <label for="name">Name:</label>
            <input id="name" type="text" placeholder="Your name" parsley-minlength="6" parsley-required="true" />
        </div>
        <div class="row">
            <input type="submit" value="Validate" />
        </div>
    </form>
    

    【讨论】:

    • 有趣的方法,但我试图使这种自动化。您的解决方案适用于一个输入,但对于此 fork jsfiddle.net/X8Nj3 中的两个输入将不起作用。
    • 在尝试破坏欧芹之前,我曾尝试在输入中使用 parsley-error-message。也许您可以更新每个输入的 parsley-error-message 并销毁 parsley 以更新错误消息。如果您只需要标签而不是值,您可以为每个输入字段提供一个 parsley-error-message。
    【解决方案2】:

    我添加了另一个数据属性 data-error-container="#elem" 可以让你直接在 dom 中指定错误信息的位置 必须显示。

    更多信息在这里:http://parsleyjs.org/documentation.html#parsleyfield

    引用自@guillaumepotier 的回答 Parsley.js - Displaying Errors in a Specified Element

    【讨论】:

      猜你喜欢
      • 2017-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-05-30
      • 2013-02-07
      • 2023-04-09
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多