Не работает валидация форм с помощью Bootstrap

560

15 декабря 2016, 16:28

Доброго времени суток, форумчане!

Подскажите пожалуйста, почему не работает валидация формы. Делаю всё, как тут:
jQuery Validate Demo
и тут
Validate a Form using jQuery and Bootstrap Validator

Может что-то не так с файлом скрипта? Или подключаю его как-то не так? Код скрипта, взятый из примера и переделанный под мои нужды:

$(document).ready(function () {
    $('#timeValidationForm').bootstrapValidator({
        container: '#messages',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            time: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required and cannot be empty'
                    }
                },
                stringLength: {
                    min: 1,
                    max: 5,
                    message: 'Input must be larger than 1 and less than 5'
                }
            }
        }
    });
});

Код html. Нужно заметить, что валидация поля происходит в модальном окне и должна работать без нажатия кнопки "submit":

@using( Html.BeginForm("ClockChanger", "Clocks", FormMethod.Post, new{@id="timeValidationForm", @class="form-horizontal"} ) )
{
    <div class="modal-body">
        <div class="form-group">
           <label class="control-label">Time</label>
           <input type="text" class="form-control" name="time" placeholder="Time in minutes" />
        </div>
       <div class="form-group">
           <div class="col-md-9 col-md-offset-3">
              <div id="messages"></div>
           </div>
       </div>
    </div>
    <div class="modal-footer">
       <div class="div_buttons_modal">
           <button type="submit" class="My_Button">Yes</button>
       </div>
       <div class="div_buttons_modal">
           <button type="button" class="My_Button" data-dismiss="modal">Cancel</button>
       </div>
   </div>
}

Скрипт подключаю в теге <head> с помощью <script>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/ValidationForm.js"></script>

Answer 1

В коде инициализации валидатора ошибка - скобка поставлена неверно и поле stringLength не входит в объект validators.

$(document).ready(function () {
    $('#timeValidationForm').bootstrapValidator({
        container: '#messages',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            time: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required and cannot be empty'
                    },
                    stringLength: {
                        min: 1,
                        max: 5,
                        message: 'Input must be larger than 1 and less than 5'
                    }
                },
            }
        }
    });
});