0

Front - end. Использую bootstrap + jquery. Дошло дело до валидации формы(jQuery Validation Plugin), все сделал кроме CheckBox. Потому что, если CheckBox не отмечен, текст о том что ето поле "Required" выводиться правее, постоянно, и получаеться вот такая лажа.

(CheckBox)You have to agree with our policy first. I am agree with terms and rules!

Текст который жирным шрифтом, должен быть снизу. Скажите пожалуйста, как сделать его валидацию, при помощи jQuery Validation Plugin или другого подобного скрипта, что бы текст был снизу?

1
  • я точно не понял в чем проблема, если мне не изменяет память то валидатор по дефолту выдает какой-то label с дефолтным текстом, в чем проблема обратится к данному появляющемуся элементу с помощью css и поставить его туда куда надо?
    – Роман
    15 апр 2016 в 16:31

1 ответ 1

1

Примерно так, это мое видение, я думаю идея тебе ясна

$(function() {
    $('#test').validate({
        errorPlacement: function(error, element) {
            if (element.attr("name") == "testCheckbox") {
//Здесь пиши любые операции если чекбокс не отмечен
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
            return true;
        },
        ignore: ":disabled",
        rules: {
            testCheckbox: {
                required: true
            },
            title: {
                required: true
            }
        },
        messages:{
            testCheckbox: {
                required : "custom error checkbox text"
            }
        }
    });
});
input.error {
  border: 1px solid red;
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<form id="test">
  <div>
    <input type="text" name="title">
  </div>
  <div>
    <input type="checkbox" name="testCheckbox"><span>I am agree with terms and rules!</span>
  </div>
  <div>
    <input type="submit">
  </div>
</form>

Ваш ответ

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

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