如何使用Parsleyjs防止從DOM中刪除表單驗證錯誤

Question

我正在使用parsleyjs驗證密碼字段。 密碼有三個要求，因此有三個驗證消息：

• 密碼至少需要8個字符
• 需要一個特殊角色
• 一個號碼是必需的

當驗證返回成功時，我不希望刪除該消息，而是留在原位並以可視方式設置消息樣式，在這種情況下帶有綠色復選標記（默認情況下消息有一個紅色錯誤圖標）。 所以基本上想要添加一個類或刪除並保留DOM中的消息。

作為一個例子，當插入一個整數時，驗證可能如下所示：

是否可以使用parsley來防止默認行為（刪除消息）並將成功的類添加到相應的錯誤消息（而不僅僅是錯誤列表容器）？

這是我到目前為止所做的和一個codepen演示

$(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鏈接上進行測試。

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中的更改：

我做的是我為綠色消息（ success div）添加了一個div，為紅色消息（ errors div）添加了一個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 to this： .success 。

Javascript的變化：

在javascript中我添加了函數window.Parsley.on('field:validate', function() {...}); 在檢查驗證器之前觸發（請參見事件列表下的此處 ）。 在那里我添加了4個if語句，用於檢查numbers驗證器是否正確， specialChar驗證器是否正確，輸入是否為空以及輸入的長度是否大於或等於minlength。 如果其中任何一個為真，則相應的消息將添加到div success ，該success的顏色為文本的綠色。 在添加這些之前，清除success div（ $('.success').html(""); ）以便更新綠色消息。

---

希望這有用。 如果您有什么不明白或者您想要的不同，請告訴我。

資料來源：

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

UPDATE

由於您希望使消息保持在相同位置 ，因此您可以檢查我創建的此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中的消息將添加為綠色，否則為紅色。

Answer 2

是的，您可以在使用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 - 顯示指定元素中的錯誤

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;
            }                
        });
}