使用对象填充的 parsley.js 验证 <select> 时遇到问题

Posted 2023-05-09

【中文标题】使用对象填充的 parsley.js 验证 <select> 时遇到问题

【英文标题】：Trouble validating <select> using parsley.js which is being populated by an object

【发布时间】：2017-06-24 10:56:34

【问题描述】：

我在验证表单上的 <select> 元素时遇到问题。使用 knockout.js 选择位置，然后根据所选位置填充服务点。按下提交按钮后，表单将使用 parsley.js

进行验证

我不断收到“此值是必需的”。当 parsley 尝试验证表单时，在位置 <select> 上。它填充得很好，当验证关闭时，值会按预期出现并流回数据库，但是当验证打开时，欧芹会抛出错误，提示“需要此值”。位置下拉菜单中有明确的值，否则将无法选择服务点。

我对这些库很陌生，但我的猜测是它被一个对象填充，虽然我不认为这会是一个问题，因为那里仍然有一个值。

希望我已经提供了足够的信息，如果您需要任何其他信息，我可以提供。

任何想法将不胜感激！

viewModelLocationAndServicePoint.data()

[
    
        "ServicePoints": [
            
                "ServicePoint": "ServicePoint1"
            
        ],
        "Location": "Location1"
    ,
    
        "ServicePoints": [
            
                "ServicePoint": "ServicePoint1"
            ,
            
                "ServicePoint": "ServicePoint2"
            ,
            
                "ServicePoint": "ServicePoint3"
            
        ],
        "Location": "Location2"
    
]

Observables 的数量

self.Location = ko.observable(data.Location().Location());
self.ServicePoint = ko.observable(data.ServicePoint());

viewModelTrackFiles 输出

    "trackfile": 
        "Location": 
            "ServicePoints": [
                
                    "ServicePoint": "ServicePoint1"
                
            ],
            "Location": "Location1"
        ,
        "TransactionMode": "",
        "ServicePoint": "ServicePoint1",
        "Status": "",
        "Comments": "",
        "Barcode": "",
        "BarcodeImageBase64": ""
    ,
    "files": [],
    "printneeded": "no",
    "TransactionMode": "",
    "dispatchmode": false,
    "StaffName": "",
    "TransactionDate": "2017-02-06T16:29:49.914Z"

HTML

<select id="cLocation" 
    data-parsley-required="true" 
    data-bind="options: viewModelLocationAndServicePoint.data(), 
        optionsCaption:'Choose Location', 
        optionsText: 'Location', 
        value: trackfile.Location">
</select>

<div data-field-span="1" data-bind="with: trackfile.Location">
    <select id="cServicePoint" 
        data-parsley-required="true" 
        data-bind="options: ServicePoints, 
            optionsCaption:'Service Points', 
            optionsText: 'ServicePoint', 
            optionsValue: 'ServicePoint', 
            value: $parent.trackfile.ServicePoint">
    </select>
</div>

【问题讨论】：

你为什么用欧芹？有一个用于淘汰赛的验证插件，我认为这对男性来说更有意义：github.com/Knockout-Contrib/Knockout-Validation。除非您使用的是淘汰欧芹插件？ github.com/gdandar/Knockout-Parsley

谢谢，老实说，我正在使用已经存在的东西，所以我不知道为什么 :) 我很确定这只是欧芹而不是淘汰欧芹。我会研究这些，因为我可能能够改变正在使用的东西，但是它需要一个大的更新，因为它一直在使用。同时，如果可能的话，理想情况下我需要一个快速的解决方案来解决这个问题。

我明白了。 value 指向父级是否正常？你确定这会返回一个非空值吗？ (value: $parent.trackfile.ServicePoint")

我使用了购物车示例 knockoutjs.com/examples/cartEditor.html 来帮助构建这部分，这就是他们使用的。

我不确定这是否适用于您的情况。由于您在 div 中有这个 data-bind="with: trackfile.Location"，我认为您只需要在选择中使用 value: ServicePoint"

【参考方案1】：

如果其他人能想出更好的方法或解释为什么 Parsley 没有认识到 <select> 中确实有一个价值，那我想出了一个现在可行的肮脏的解决方法，那就太棒了！

我创建了一个隐藏文本 <input>，当它发生变化时，它会被 <select> 填充。

然后对该文本<input> 进行验证。这使得 Parsley 错误消息出现在 <select> 下，但不会更改 <select> 的背景颜色（见下面的屏幕截图），我现在可以忍受。

HTML

<select id="cLocation" 
    data-bind="options: viewModelLocationAndServicePoint.data(), 
        optionsCaption:'Choose Location', 
        optionsText: 'Location', 
        value: trackfile.Location">
</select>
<input style="display: none" type="text" id="loc" data-parsley-required="true">

jQuery 脚本

<script type="text/javascript">
    $(function () 
        $("#cLocation").on("change", function () 
            //Update hidden text input to fix issue
            //where ParsleyJS is not validating Location
            //dropdown possibly due to how it is being populated
            $("#loc").val($("#cLocation option:selected").text());
        );
    );
</script>

截图