Hướng dẫn how to change color of error message in javascript - cách thay đổi màu của thông báo lỗi trong javascript

Tôi đang sử dụng JavaScript để làm điều tương tự (xác thực một biểu mẫu với các tệp được nâng lên), tôi hy vọng nó sẽ được coi là những gì bạn muốn làm

 $(document).ready(function() {

$(".verif_form_ajax").submit(function(){   
        var $inscription_form = $('#inscription_form');

        var process;

        process=1;

        $(".obg").each(function(){
            var length = $(this).val();
                 if(length==""){
                     $(this).css('border-color','#c89494'); 
                      $(this).css('background-color','#F9D3D3');    
                     process=0;                      
                 }else{
                    $(this).css('border-color','#9ac894');
                     $(this).css('background-color','#dbfcd7'); 
                 }  
        });

        $(".obg").blur(function(){
            var length = $(this).val();
                 if(length==""){
                     $(this).css('border-color','#c89494'); 
                      $(this).css('background-color','#F9D3D3');    
                     process=0;                      
                 }else{
                    $(this).css('border-color','#9ac894');
                     $(this).css('background-color','#dbfcd7'); 
                 }  
        });

        if(process=="0"){   
          return false;         
        }
        else{
        file = $('#userfile').val();
        contentType:attr( "enctype", "multipart/form-data" ),
        $.post($(this).attr("action"),  {file:file}, $(this).serialize(), function(data){
            // do wathever you want to do when form is posted
            $inscription_form.html(data);
        });
        return false;

        }
});



});

Sau đó, trong mẫu đơn, bạn muốn một xác thực được nộp, bạn đặt nó một lớp = "obg" như thế này

 Namen :
  

Tái bút: Xin thứ lỗi cho tiếng Anh kém của tôi !!

Chúng ta có thể phân biệt một trường hợp lệ và không hợp lệ theo màu sắc. Biểu tượng nhãn, tin nhắn và phản hồi được liên kết với một trường hợp lệ thường có màu trông giống như màu xanh lá cây. Khi trường không hợp lệ, các yếu tố này có màu giống như màu đỏ.

Ví dụ này cho thấy hai cách tiếp cận để thay đổi các màu này.

Ghi đè lên màu sắc

Nếu biểu mẫu của bạn sử dụng khung Bootstrap, FormValidation sẽ thêm lớp .has-success hoặc .has-danger vào thùng chứa trường dựa trên tính hợp lệ của trường. Phần tử trường sẽ được thêm vào lớp .is-valid hoặc .is-invalid.

Các thành phần biểu tượng nhãn, trường, tin nhắn và phản hồi sẽ nhận được các kiểu xác thực liên quan:

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;
}

Vì vậy, bạn khá dễ dàng để ghi đè các màu này cho tất cả các biểu mẫu hoặc biểu mẫu cụ thể như dưới đây:

.my-form.fv-plugins-bootstrap .fv-help-block {
    color: #f39c12;
}
.my-form.fv-plugins-bootstrap .has-danger .fv-plugins-icon {
    color: #f39c12;
}
.my-form.fv-plugins-bootstrap .has-success .fv-plugins-icon {
    color: #18bc9c;
}

Ghi đè các lớp hàng

Như đã đề cập trong phần trước, dựa trên tính hợp lệ của trường, plugin sẽ thêm các lớp khác nhau cho thùng chứa trường. Các lớp hợp lệ và không hợp lệ có thể được xác định thông qua các tùy chọn ____10 và

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;
}

 Namen :
  

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;
}

 Namen :
  

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;
}

 Namen :
  

.fv-help-block {
    color: #dc3545;
}



.has-danger .fv-plugins-icon {
 color: #dc3545;
}
.has-success .fv-plugins-icon {
 color: #28a745;
}

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

 Namen :
  

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;
}

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;
}

Plugin mini

.my-field-error .fv-plugins-message-container,
.my-field-error .fv-plugins-icon {
    color: #ff0039;
}
.my-field-success .fv-plugins-message-container,



.my-field-success .fv-plugins-icon {
 color: #2780e3;
}

Plugin MUI

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            tachyons: new FormValidation.plugins.Tachyons({
                rowInvalidClass: 'my-field-error',
                rowValidClass: 'my-field-success',
            }),
        },
    }
);

Plugin thuần túy

• Plugin ngữ nghĩa

• .my-form.fv-plugins-bootstrap .fv-help-block {
      color: #f39c12;
  }
  .my-form.fv-plugins-bootstrap .has-danger .fv-plugins-icon {
      color: #f39c12;
  }
  .my-form.fv-plugins-bootstrap .has-success .fv-plugins-icon {
      color: #18bc9c;
  }

  1

Làm cách nào để thay đổi màu của lỗi xác thực?

Làm thế nào để bạn hiển thị lỗi trong JavaScript?