5

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

Подскажите пожалуйста, почему не работает валидация формы. Делаю всё, как тут:
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>
1
  • 1
    Разместите отрендеренный html код и скрипты на jsfiddle.net, тогда гораздо проще будет выяснить
    – FLCL
    14 июл 2015 в 12:23

1 ответ 1

5
+50

В коде инициализации валидатора ошибка - скобка поставлена неверно и поле 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'
                    }
                },
            }
        }
    });
});

Исправленный вариант в fiddle.

7
  • поправила, но валидация по-прежнему не осуществляется. Никаких видимых признаков того, что она работает на форме. Предполагается, что как только я введу что-то в поле и щёлкну в любое место формы, не нажимая кнопку "submit", должна осуществляться проверка. Но, это не происходит. Может данное решение не позволяет осуществить то, что хочется, и как-то нужно дополнить скрипт, чтобы он менял название класса тега input на has-success????
    – neo
    14 июл 2015 в 12:43
  • @cat_woman, когда в примере ввожу данные в поле, сообщения о пустом поле и о превышении длины высвечиваются, может у вас адблокер скрипты блокирует или несколько форм с одинаковыми id, а ещё гляньте в консоль разработчика на предмет ошибок
    – FLCL
    14 июл 2015 в 12:46
  • спасибо!!! Посмотрела в вашем решении, что в моём не хватало файла: <script src="~/Scripts/bootstrapValidator.js"></script>. Пишут, что смогу вам вручить награду через 21 час))) Ждите)
    – neo
    14 июл 2015 в 12:49
  • а может ещё заодно подскажете, как сделать проверку на тип вводимых данных: число или нет?
    – neo
    14 июл 2015 в 12:56
  • @cat_woman вот тут список всех валидаторов formvalidation.io/validators , digits вам как раз подойдёт: digits: { message: 'Numbers ples' }
    – FLCL
    14 июл 2015 в 13:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.