如何防止使用 Parsleyjs 从 DOM 中删除表单验证错误

Question

我正在使用 parsleyjs 验证密码字段。密码有三个要求，因此有三个验证消息：

密码至少需要 8 个字符
需要一个特殊字符
需要一个号码

当验证 returns 成功时，我不希望消息被删除，但要保留在原处并在视觉上设置消息的样式，在本例中为绿色复选标记（默认消息有一个红色错误图标）。所以基本上想添加一个 class 或删除并保留 DOM.

中的消息

例如，当插入一个整数时，验证可能如下所示：

欧芹是否可以防止默认行为（删除消息）并将成功的 class 添加到相应的错误消息（而不仅仅是错误列表容器）？

这是我目前所拥有的 codepen demo

$(function() {
    $('.form').parsley();
});

window.Parsley.addValidator('number', {
    validateString: (value) => {
        const format = /\d/;
        return format.test(value);
    },
    messages: {
        en: 'One number is required'
    }
});

window.Parsley.addValidator('specialChar', {
    validateString: (value) => {
        const format = /[!@#$%^&*()_+\-=[\]{};':"\|,.<>/?]/;
        return format.test(value);
    },
    messages: {
        en: 'One special character is required'
    }
});

Answer 1

是的，您可以在使用 parsleyjs 时添加自定义 CSS。请参阅以下内容：

$('form').parsley();

$.listen('parsley:field:error', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-success').addClass('cta-error');
});
$.listen('parsley:field:success', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-error').addClass("cta-success");    
});

您可以在 JsFiddle 网站上查看工作示例。

您还可以查看 codepen.io

上的示例

您也可以在下面查看guillaumepotier的答案：

Parsley.js - Displaying Errors in a Specified Element

Answer 2

我为你的问题想出了这个解决方案，效果很好。

你可以在这个Codepen Link.

上测试

HTML

<form class="form">
    <label for="password-01">Password:</label>
  <input class="password" id="password-01" type="password" required 
data-parsley-class-handler=".errors"
data-parsley-errors-container=".errors"
data-parsley-special-char="" data-parsley-number="" minlength="8" data-parsley-validation-threshold="0" data-parsley-trigger="keyup" data-parsley-priority-enabled="false"/>
    <input type="submit" value="Submit" />
</form>
<div class="feedback">
    <div class="success"></div>
    <div class="errors"></div>
</div>

CSS

body {
    font-family: sans-serif;
}

.form {
    padding: 1rem;
    background: lightgrey;
}

label {
    display: block;
    margin-bottom: .2rem;
}

.feedback {
    margin-top: 1rem;
    border: 1px solid gray;
    padding: 2rem;
}

.parsley-errors-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.parsley-errors-list li {
    color: red;
}

.success {
    color: green;
}

Javascript

$(function() {
    $('.form').parsley();   

    window.Parsley.addValidator('number', {
        validateString: (value) => {
            const format = /\d/;
            return format.test(value);
        },
        messages: {
            en: 'No number'
        }
    });

    window.Parsley.addValidator('specialChar', {
        validateString: (value) => {
            const format = /[!@#$%^&*()_+\-=[\]{};':"\|,.<>/?]/;
            return format.test(value);
        },
        messages: {
            en: 'No special character'
        }
    });

    $('.password').on('keyup', function() {

        $('.success').html(""); // clear success div

            // check numbers success
            if (window.Parsley._validatorRegistry.validators.number.validateString($('.password').val())){      
                $('.success').append( window.Parsley._validatorRegistry.validators.number.messages.en +"<br>");
            }


            // check specialChar success
            if (window.Parsley._validatorRegistry.validators.specialChar.validateString($('.password').val())){     
                $('.success').append( window.Parsley._validatorRegistry.validators.specialChar.messages.en +"<br>");
            }

        var length = $('.password').val().length;

            // check if input is empty
            if (length > 0){
                    $('.success').append("This value is required.<br>");
            }

            // check minlength success  
            var minlength = $('.password').attr("minlength");
            if (length >= minlength){
                $('.success').append("This value is too short. It should have "+minlength+" characters or more.<br>");
            }



    });

});

HTML的变化：

我所做的是，我为绿色消息添加了一个div (success div)，为红色消息添加了一个div (errors div) 并将反馈 div 重新排列为：

<div class="feedback">
    <div class="success"></div>
    <div class="errors"></div>
</div>

我还在输入属性中替换了这个：

data-parsley-class-handler=".feedback"
data-parsley-errors-container=".feedback"

有了这个：

data-parsley-class-handler=".errors"
data-parsley-errors-container=".errors"

CSS的变化：

我将此 CSS 部分：.parsley-errors-list .success 重命名为：.success.

Javascript的变化：

在 javascript 中，我添加了函数 window.Parsley.on('field:validate', function() {...});，它在验证器检查之前触发（请参阅事件列表下的 here）。在那里我添加了 4 个 if 语句来检查 numbers 验证器是否正确，specialChar 验证器是否正确，输入是否为空以及输入的长度是否大于或等于最小长度。如果其中任何一个为真，则相应的消息将添加到文本为绿色的 div success 中。在添加这些之前，success div 被清除 ($('.success').html("");) 以便更新绿色消息。

希望这对您有所帮助。如果您有不明白的地方或您想要的不同，请告诉我。

来源：

更新

既然你想让消息停留在同一个位置，你可以查看我创建的这个Codepen。我从html中删除了errors和successdiv，并在javascript中添加了下面的函数:

$('.password').on('input', function() {

    $('.feedback').html(""); // clear feedback div

    // check numbers success
    if (window.Parsley._validatorRegistry.validators.number.validateString($('.password').val())){      
        $('.feedback').append("<font color='green'>" + window.Parsley._validatorRegistry.validators.number.messages.en +"</font><br>");
    } else {      
        $('.feedback').append("<font color='red'>" + window.Parsley._validatorRegistry.validators.number.messages.en +"</font><br>");
    }   

    // check specialChar success
    if (window.Parsley._validatorRegistry.validators.specialChar.validateString($('.password').val())){     
        $('.feedback').append("<font color='green'>"+ window.Parsley._validatorRegistry.validators.specialChar.messages.en +"</font><br>");
    } else {
        $('.feedback').append("<font color='red'>"+ window.Parsley._validatorRegistry.validators.specialChar.messages.en +"</font><br>");
    }

    var length = $('.password').val().length;

    // check if input is empty
    if (length > 0){
        $('.feedback').append("<font color='green'>This value is required.</font><br>");
    } else {
        $('.feedback').append("<font color='red'>This value is required.</font><br>");
    }

    // check minlength success  
    var minlength = $('.password').attr("minlength");
    if (length >= minlength){
        $('.feedback').append("<font color='green'>This value is too short. It should have "+minlength+" characters or more.</font><br>");
    } else {
        $('.feedback').append("<font color='red'>This value is too short. It should have "+minlength+" characters or more.</font><br>");
    }   

});

使用上面的函数，每次输入改变时，feedback div 被清除，然后检查 4 个条件，消息被添加到 feedback div 如果相应条件为真，则为绿色，否则为红色。

Answer 3

@Thanasis 的回答没问题，但我想建议更短的答案（否 css）。

HTML

<input type="password" 
       data-parsley-number="true" 
       data-parsley-specialchar="true" 
       data-parsley-min8="true" 
       data-parsley-error-message="Password rules are:" 
       data-parsley-required="true">
<ul>
    <li id="number-char">number</li> 
    <li id="special-char">special-char (;,/,?,:,@,&amp;,=,+,$)</li> 
    <li id="min8-char">at least 8 chars</li> 
</ul>

JavaScript:

if (typeof Parsley !== 'undefined') {

    Parsley.addValidator('specialchar',
        function (value){            
            if (/^[a-zA-Z0-9.]*$/.test(value)==false) {
                jQuery("#special-char").addClass("completed");
                return true;
            }
            else {
                jQuery("#special-char").removeClass("completed");
                return false;
            }
        });    
    Parsley.addValidator('number',
        function (value){            
            if (/[0-9]/.test(value)){
                jQuery("#number-char").addClass("completed");
                return true;
            }
            else{
                jQuery("#number-char").removeClass("completed");
                return false;
            }                
        });  
    Parsley.addValidator('min8',
        function (value){            
            if (value.length >= 8){
                jQuery("#min8-char").addClass("completed");
                return true;
            }
            else{
                jQuery("#min8-char").removeClass("completed");
                return false;
            }                
        });
}

如何防止使用 Parsleyjs 从 DOM 中删除表单验证错误

How to prevent form validation errors to be removed from the DOM with Parsleyjs

javascript

jquery

parsley.js

HTML

JavaScript: