Parsley.js - 在同一頁上以不同形式同名的Radiobutton一起驗證

我已經搜索了近2天，但似乎無法找到此問題的答案。Parsley.js - 在同一頁上以不同形式同名的Radiobutton一起驗證

在一頁上我有兩種不同的形式（註冊，客人結帳）。兩者使用幾乎相同的表單元素，然後具有相同的名稱屬性。提交時，只有當前表單得到驗證，並且一切工作正常。文本輸入字段。

BUT：單選按鈕和複選框被Parsley.js區別對待 - 等提交客結帳形式（這是在第二標記）的錯誤信息和類添加到登記表。這兩種輸入類型的情況確實如此。

似乎歐芹對這些元素屬於哪種形式沒有影響。它只是查看名稱屬性。這有點煩人，尤其是因爲其他輸入類型沒有共享相同名稱屬性的問題。

下面是HTML代碼片段：

<form id="registrationForm" data-validate-form="true" ...> 
    <label>Mrs</label> 
    <input type="radio" name="salutation" value="mrs"/> 
    <label>Mr</label> 
    <input type="radio" name="salutation" value="mr" data-validate-required="true"/> 
    <label>Firstname</label> 
    <input type="text" name="firstname" data-validate-required="true"/> 
</form> 

<form id="guestcheckout" data-validate-form="true" ...> 
    <label>Mrs</label> 
    <input type="radio" name="salutation" value="mrs"/> 
    <label>Mr</label> 
    <input type="radio" name="salutation" value="mr" data-validate-required="true"/> 
    <label>Firstname</label> 
    <input type="text" name="firstname" data-validate-required="true"/> 
</form>

而且這裏的JavaScript設置：

$('[data-validate-form]').parsley({ 
    namespace : 'data-validate-', 
    errorsWrapper : '<div></div>', 
    errorTemplate : '<span></span>', 
    errorClass : 'error', 
    successClass : 'success' 
});

有其他人遇到過這個問題嗎？哦，我無法更改名稱屬性。

在此先感謝您的幫助！

來源

2014-06-13 Karina

因此，我的同事和我找到了解決方案。

在我們所定義的元素的當前形式和加入其ID到multiple字符串handleMultiple方法：

// Add current form id to name to differ between several forms on same page. 
var currentForm = $('#' + this.$element[0].form.id); 
multiple = currentForm.attr('id') + '-' + multiple;

然後，我們加入currentForm到輸入選擇像這樣：

$('input[name="' + name + '"]', currentForm).each(function() {...}

這確保只有選擇正確形式的輸入。

然後移動到setupField方法。在_ui.errorsWrapperId的定義中，我們還添加了當前表單的標識（fieldInstance.$element[0].form.id）。

原文：

_ui.errorsWrapperId = 'parsley-id-' + ('undefined' !== typeof fieldInstance.options.multiple ? 'multiple-' + fieldInstance.options.multiple : fieldInstance.__id__);

新：

_ui.errorsWrapperId = 'parsley-id-' + ('undefined' !== typeof fieldInstance.options.multiple ? 'multiple-' + fieldInstance.$element[0].form.id + '-' + fieldInstance.options.multiple : fieldInstance.__id__);

這是要正確打印錯誤消息。

也許這可以幫助其他人。

來源

2014-06-17 11:27:54 Karina

Parsley.js - 在同一頁上以不同形式同名的Radiobutton一起驗證

回答

相關問題