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

Question

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

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

当验证返回成功时，我不希望消息被删除，而是保留在原地并视觉上设置消息的样式，在这种情况下带有绿色复选标记(默认情况下消息有红色错误图标)。所以基本上想添加一个类或删除并保留 DOM 中的消息。

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

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

这是我目前所拥有的和一个 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

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

你可以在这个 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("");) 以便更新绿色消息。

---

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

来源:

• http://api.jquery.com/append/
• http://api.jquery.com/attr/
• http://api.jquery.com/val/

更新

既然你想让消息停留在同一个位置，你可以查看这个Codepen我创建。我从 html 中删除了 errors 和 success div，并在 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如果相应的条件为真则为绿色，否则为红色。