2

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()
            }
        },
Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
Anbu369
  • 99
  • 1
  • 13
  • 1
    `validator.getFieldElements('isMobile').val()` Try, Refer http://bootstrapvalidator.votintsev.ru/validators/remote/ – Sumesh TG Dec 03 '18 at 14:39
  • please add it as an answer. – Sumesh TG Dec 04 '18 at 07:28
  • @SumeshTG I have another query regarding the checkbox trigger. As I have mentioned in my question, for now, I am sending a remote request for validating `phone`. Likewise, I would like to send another request when the `isMobile[]` checkbox is changed. Using the same method, `trigger : 'change'` does not work. nor did `blur` or `click` events. What should I do? – Anbu369 Dec 04 '18 at 09:15
  • Add one more rules set for `isMobile`. – Sumesh TG Dec 04 '18 at 09:51
  • @SumeshTG can you please elaborate what rules set I should use for checkbox? I just want to send a remote call when the checkbox is changed. – Anbu369 Dec 04 '18 at 10:39
  • Try to write a event listner on `isMobile`, `$(".isMobile").change(function(){....your code .....})` and do a ajax call to your server api. – Sumesh TG Dec 04 '18 at 10:55
  • @SumeshTG Assuming this cannot be done inside the `bootstrapvalidator ` method, I wrote an event listener outside, sent ajax call and now I would like to invalidate the `phone` field from outside. I use `validator.updateStatus('isMobile[]', 'INVALID', null)` this updates the relevant `phone` field and marks it invalid but I don't get an error message. How do I show an error message? – Anbu369 Dec 04 '18 at 11:43
  • 1
    there will be a hidden block for showing error with class `help-block` associated with every element you configured in the validator. You may just show/hide `help-block` nearby the desired element. – Sumesh TG Dec 04 '18 at 12:19
  • thanks that works @SumeshTG – Anbu369 Dec 04 '18 at 12:30

1 Answers1

2

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()
            }
        }
Anbu369
  • 99
  • 1
  • 13