简体   繁体   中英

Using Jquery bootstrap validation to validate individual field in an array of fields along with sibling field

I have a form with form-groups each containing similar text fields and checkboxes which are sent as arrays when submitting the form as below:

<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>

After every time someone enters their phone, I want to do a remote validation but I would like to send isMobile field along with the request. Currently I am able to send the phone field for validation but couldn't send the corresponding mobile field along with it in the data attribute. Here is my code

$('#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 () {
                        
                    }
                }
            }
        }
    }

})

Edit: The following worked.

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

As suggested by @Sumesh, using validator.getFieldElements('isMobile[]').val() worked

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM