使用 Jquery 引导验证来验证字段数组中的单个字段以及兄弟字段

Posted 2023-05-08

【中文标题】使用 Jquery 引导验证来验证字段数组中的单个字段以及兄弟字段

【英文标题】：Using Jquery bootstrap validation to validate individual field in an array of fields along with sibling field

【发布时间】：2019-05-04 19:43:50

【问题描述】：

我有一个带有表单组的表单，每个表单组包含类似的文本字段和复选框，在提交表单时作为数组发送，如下所示：

<form method="POST" action="http://localhost/save-form" id="formAddUser">
    <div class="form-group">
        <input type="text" class="name" name="username[]" />
        <input type="text" class="phone" name="phone[]" />
        <input type="text" class="country" name="country[]" />
        <input type="checkbox" class="isMobile" name="isMobile[]" />
    </div>
    <div class="form-group">
        <input type="text" class="name" name="username[]" />
        <input type="text" class="phone" name="phone[]" />
        <input type="text" class="country" name="country[]" />
        <input type="checkbox" class="isMobile" name="isMobile[]" />
    </div>
    <div class="form-group">
        <input type="text" class="name" name="username[]" />
        <input type="text" class="phone" name="phone[]" />
        <input type="text" class="country" name="country[]" />
        <input type="checkbox" class="isMobile" name="isMobile[]" />
    </div>
</form>

每次有人进入他们的手机后，我想进行远程验证，但我想将isMobile 字段与请求一起发送。目前我可以发送电话字段进行验证，但无法在数据属性中发送相应的移动字段。这是我的代码

$('#frmAddUser').bootstrapValidator(
    fields: 
        'phone[]': 
            trigger: 'blur',
            validators: 
                notEmpty: 
                    message: ' '
                ,
                remote: 
                    message: 'Phone does not exist',
                    url: 'http://localhost/verify-phone',
                    data: function () 
                        // leaving this empty just sends the phone. How do I send isMobile parameter along with this?
                    
                ,
                callback: 
                    callback: function () 

                    
                
            
        
    

)

编辑：以下工作。

remote: 
            message: 'Phone does not exist',
            url: 'http://localhost/verify-phone',
            data: function () 
                var isMobile = validator.getFieldElements('isMobile[]').val()
                
            ,

【问题讨论】：

validator.getFieldElements('isMobile').val() 试试看，推荐bootstrapvalidator.votintsev.ru/validators/remote

请将其添加为答案。

@SumeshTG 我有另一个关于复选框触发器的查询。正如我在问题中提到的，目前，我正在发送一个远程请求以验证phone。同样，当isMobile[] 复选框被更改时，我想发送另一个请求。使用相同的方法，trigger : 'change' 不起作用。 blur 或 click 事件也没有。我该怎么办？

为isMobile再添加一个规则集。

将有一个隐藏块用于显示与您在验证器中配置的每个元素相关联的类 help-block 的错误。您可以在所需元素附近显示/隐藏help-block。

【参考方案1】：

按照@Sumesh 的建议，使用validator.getFieldElements('isMobile[]').val() 有效

remote: 
        message: 'Phone does not exist',
        url: 'http://localhost/verify-phone',
        data: function () 
            var isMobile = validator.getFieldElements('isMobile[]').val()