Katerina23

Как сделать подсвечивания поля с ошибками, bootstrap?

Recommended Posts

Я использовала старую версию bootstrap 3.3.5 сейчас я подключила Bootstrap v4.3.1. и вот этот код больше не работает.

errorPlacement: function ( error, element ) {
					
					error.addClass( "help-warrior" );

					if ( element.prop( "type" ) === "checkbox" ) {
						error.insertAfter( element.parent( "label" ) );
					} else {
						error.insertAfter( element );
					}
				},
        highlight: function ( element, errorClass, validClass ) {
         
					$( element ).parents( ".form-group" ).addClass( "has-error" ).removeClass( "has-success" );
					$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
		},
		unhighlight: function ( element, errorClass, validClass ) {
					$( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-error" );
					$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
		},
        submitHandler: function() {
                alert("Submitted, thanks!");
                
        }

Как сделать в новой версии bootstrap подсвечивание?

Share this post


Link to post
Share on other sites

help-warrior — в бутстрапе никогда не было таких классов. 

Открываете список изменений 4 версии и смотрите, что на что сменилось. Меняете классы в вашем коде. 

Share this post


Link to post
Share on other sites

Нашла примеры для Bootstrap 4 https://mdbootstrap.com/docs/jquery/forms/validation/, только они какие-то странные попыталась сделать не получилось, то что я хочу . Мне не нужны никакие крестики и галочки (в случае error или success) в поле input, мне надо вот так. https://jqueryvalidation.org/files/demo/bootstrap/index.html Чтобы поле подсвечивалось если неправильно заполнено красным или же если правильно то зелёным цветом.

Share this post


Link to post
Share on other sites

Не вижу проблем. 

Сделайте пример в песочнице, так будем для всех проще. 

Share this post


Link to post
Share on other sites

В общем я сделала с помощью обычных стилей. Я разместила пример как просили в посте выше (по ссылке) https://codepen.io/Smith37/pen/ZEGbLEO. Подсветка работает но всё равно не то, у меня подсвечивается весь блок вместе с сообщением, а я хочу, чтобы подсвечивалась только поле input, в случае ошибки (красным) и правильно введенного значения (зелёным) как здесь. https://jqueryvalidation.org/files/demo/bootstrap/index.html

Edited by Katerina23

Share this post


Link to post
Share on other sites

Опять же. Какая проблема переписать стили? 

Перекрашивать не сам .has-danger , а .has-danger > .form-control 
Так нельзя?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,691
    Total Members
    3,128
    Most Online
    Roomty
    Newest Member
    Roomty
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.