Bootstrap Validator not validating

Question

I'm trying to use Bootstrap Validator to validate a form, which is split across two "col-md" classes

The first is held within a .col-md-8 and the second is in a .col-md-3.

The validation is working on the one in the .col-md-8, but nothing in the .col-md-3 is validating.

I know the syntax for the Bootstrap validator is correct, as its a copy from an earlier one that is working.

Does anyone have any experience of this?

<div class="form-group">
        <label for="number">House Number</label>
        <input class= "form-control" style="width:30%;" type="text" name="number" placeholder="e.g. 2a">    
</div>

validator javascript:

$('#multiform')
    .find('[name="list_type"]')
            .change(function(e) {
                $('#multiform').bootstrapValidator('revalidateField', 'price');
            })
            .end()
          .bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
             required: 'fa fa-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
                price: {
                     validators: {
                        notEmpty: {
                            message: 'The price is required and cannot be empty'
                        },
                        integer: {
                            message: 'You can only enter an integer'
                        }, 
                        regexp: {
                        regexp: /^[0-9]+$/,
                        message: 'The price can only consist of numbers'
                    }      
                   }
                },
                title: {
                    validators:{
                        notEmpty: {
                            message:'This field cannot be empty'
                        }, 
                        regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: 'The title can only consist of letters and numbers'
                        }
                     }
                },
              desc: {
                    validators:{
                        notEmpty: {
                            message: 'This field cannot be empty'
                        },
                        stringLength: {
                            max: 500,
                            message: 'Your description is too long'
                        },
                        regexp: {
                        regexp: /^[a-zA-Z0-9#*]+$/,
                        message: 'The house number can only consist of letters and numbers'
                        }
                    }
                },
                number: {
                    validators:{
                        notEmpty: {
                            message: 'This field cannot be empty'
                        }
                    }

                } 

            }
          });

(with the code above, its the number that isn't validating.

Try using another name `number` is reserved namespace in jQuery validator. — Control Freak, Sep 25 '14 at 23:08
Did do try to change the name ``number`` to something else just like @ZeeTee said ? — Arkni, Sep 27 '14 at 18:07
@Mobaz As i can see your JS code is correct, but it will be better if you can create a [jsfiddle](http://jsfiddle.net) . — Arkni, Sep 27 '14 at 18:15

vanburen · Answer 1 · 2015-12-24T03:20:16.753

Everything appears to be correct, here's an example and post your html if possible if you're still encountering an issue.

See Snippet.

$('#multiform')
  .find('[name="list_type"]')
  .change(function(e) {
    $('#multiform').bootstrapValidator('revalidateField', 'price');
  })
  .end()
  .bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      required: 'fa fa-asterisk',
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      price: {
        validators: {
          notEmpty: {
            message: 'The price is required and cannot be empty'
          },
          integer: {
            message: 'You can only enter an integer'
          },
          regexp: {
            regexp: /^[0-9]+$/,
            message: 'The price can only consist of numbers'
          }
        }
      },
      title: {
        validators: {
          notEmpty: {
            message: 'This field cannot be empty'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9]+$/,
            message: 'The title can only consist of letters and numbers'
          }
        }
      },
      desc: {
        validators: {
          notEmpty: {
            message: 'This field cannot be empty'
          },
          stringLength: {
            max: 500,
            message: 'Your description is too long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9#*]+$/,
            message: 'The house number can only consist of letters and numbers'
          }
        }
      },
      number: {
        validators: {
          notEmpty: {
            message: 'This field cannot be empty'
          }
        }

      }

    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="multiform" name="multiform" method="post">
    <div class="form-group">
      <label for="price">Price</label>
      <input class="form-control" id="price" type="text" name="price" placeholder="e.g. 2a">
    </div>
    <div class="form-group">
      <label for="number">House Number</label>
      <input class="form-control" id="number" type="text" name="number" placeholder="e.g. 2a">
    </div>
    <input class="btn" type="submit" value="Send">
  </form>
</div>

Bootstrap Validator not validating

1 Answers1