Xóa màu đường viền đã đặt trước đó

20

function validate() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;

	if (username == "") {

		document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
		document.getElementById("username").style.borderColor = "red";
		return false;
	}
	if (password == "") {


		document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
		document.getElementById("password").style.borderColor = "red";
		return false;
	}
}

#username:focus {
	background-color: yellow;
	border-color: green;
}

#password:focus {
	background-color: yellow;
	border-color: green;
}

#message {
	color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br>
    <input id="username" type="text" name="username" placeholder="USERNAME">
    <br>
    <input id="password" type="password" name="password" placeholder="PASSWORD">
    <br>
    <input type="submit" value="SUBMIT">
    <p id="message">
</form>

Mở rộng đoạn trích

Khi tôi tập trung vào các trường văn bản, màu nền và đường viền thay đổi thành màu vàng và màu xanh lá cây tương ứng (thông qua css).
Nếu tôi nhấp vào gửi mà không nhập bất cứ điều gì, màu viền sẽ chuyển sang màu đỏ (thông qua javascript).
Nhưng khi tôi tập trung vào trường văn bản một lần nữa, màu viền đỏ không biến mất, thay vào đó tôi có cả viền màu lục và màu đỏ.

Tôi muốn nó chỉ có màu xanh. Bạn cũng có thể giải thích lý do cho hành vi này.

javascript html css

— SuperAadi
nguồn

10

Điều này xảy ra bởi vì bạn đã cập nhật kiểu phần tử thay vì thuộc tính CSSlớp. Phong cách yếu tố có trọng lượng cao nhất cho CSS. Thay vào đó, thêm một lớp lỗi tự động vào lỗi và loại bỏ nó khi trường biểu mẫu hợp lệ.

Theo tài liệu , thứ tự của phong cách theo thứ tự giảm dần sẽ là.

Kiểu nội tuyến (bên trong một phần tử HTML)
Biểu định kiểu bên ngoài và bên trong (trong phần đầu)
Trình duyệt mặc định

Đây là một ví dụ làm việc

function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username == "") {
        document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
        document.getElementById("username").classList.add("invalidInput");
        return false;
    } else {
        document.getElementById("username").classList.remove("invalidInput")
    }
    if (password == "") {
        document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
        document.getElementById("password").classList.add("invalidInput")
        return false;
    } else {
        document.getElementById("password").classList.remove("invalidInput")
    }
}

#username:focus {
    background-color: yellow;
    border-color: green;
}

#password:focus {
    background-color: yellow;
    border-color: green;
}

.invalidInput {
    border-color: red; 
}

#message {
    color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br />
    <input id="username" type="text" name="username" placeholder="USERNAME" />
    <br />
    <input id="password" type="password" name="password" placeholder="PASSWORD" />
    <br />
    <input type="submit" value="SUBMIT" />
    <p id="message"></p>
</form>

Mở rộng đoạn trích

— Không
nguồn

1

Câu trả lời này nên được chấp nhận, vì thêm vào! Quan trọng không phải là một cách tiếp cận tốt

— Piyush

1

trọng lượng đã là từ bạn đang tìm kiếm, không cần thêm hậu tố -age.

— Emanuel Vintilă

3

Vấn đề là màu sắc có cùng mức độ quan trọng đối với css và do đó mã không biết nên ưu tiên cái nào. Vì vậy, để khắc phục điều đó, bạn phải làm cho màu xanh lá cây quan trọng hơn trong mã css.

Để làm điều đó thay đổi mã css tập trung để trông như thế này.

#username:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#password:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#message {
  color: red;
}

Hi vọng điêu nay co ich!

— Austin Leeematley
nguồn

Trong khi điều này giải quyết vấn đề, tôi bối rối, tại sao khi một tài sản được đặt lại với một giá trị mới lại xảy ra vấn đề ưu tiên?!

— Tick20

Kiểm tra câu trả lời của @ Geetanjali. Điều đó xử lý chính xác những gì bạn đang nói.

— Hari Das

Đó là một câu hỏi hay. Đó là bởi vì trong css khi bạn thêm các thuộc tính, chẳng hạn như 'tiêu điểm', bạn đang thêm một người nghe vào phần tử đó, bạn không đặt lại nó với một giá trị mới. Do đó, thuộc tính chỉ có hiệu lực khi bạn tập trung vào yếu tố đó.

— Austin Leeematley

1

Thay vì thêm màu từ javascript, bạn có thể sử dụng yêu cầu trong hộp nhập và: không hợp lệ trong CSS. Kiểm tra đoạn trích

function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    //document.getElementById("username").style.borderColor = "red";
    return false;
  }
  if (password == "") {


    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    //document.getElementById("password").style.borderColor = "red";
    return false;
  }

}

#username:focus{
  background-color: yellow;
  border-color: green;
}

#username:invalid{
  background-color: none;
  border-color: red;
}

#password:focus{
  background-color: yellow;
  border-color: green;
}
#password:invalid{
  background-color: none;
  border-color: red;
}


#message {
  color: red;
}

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" name="username" placeholder="USERNAME" required>
  <br>
  <input id="password" type="password" name="password" placeholder="PASSWORD" required>
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

Mở rộng đoạn trích

— Siva Rm K
nguồn

1

Bạn chỉ có thể hoàn nguyên màu đường viền trên keyup và tạo một lớp mới errorđể ghi đè màu đường viền thành màu đỏ

function retainColor(ele){
  ele.style.borderColor = "inherit";
  document.getElementById("message").innerHTML = "";
}
function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    document.getElementById("username").classList.add("error");
    return false;
  }else{
    document.getElementById("username").classList.remove("error");
  }
  if (password == "") {
    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    document.getElementById("password").classList.add("error");
    return false;
  }else{
    document.getElementById("password").classList.remove("error");
  }

}

#username:focus {
  background-color: yellow;
  border-color: green;
}

#password:focus {
  background-color: yellow;
  border-color: green;
}
.error {
  border-color: red;
}

.error {
  border-color: red;
}

#message {
  color: red;
}

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" onkeyup="retainColor(this)" name="username" placeholder="USERNAME">
  <br>
  <input id="password" type="password" onkeyup="retainColor(this)" name="password" placeholder="PASSWORD">
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

Mở rộng đoạn trích

— Geetanjali
nguồn

Thêm thuộc !importanttính vào một phần tử trong css làm cho kiểu không thể cập nhật ở bất kỳ trường hợp nào.

— Nitheesh

0

Bạn đang thiết lập màu sắc thông qua JS, nhưng không bao giờ bỏ cài đặt chúng, vì vậy về cơ bản chúng sẽ được đặt vĩnh viễn.

Một cách để ngăn chặn hành vi này là cũng thêm một chức năng khác để nắm bắt OnClicksự kiện của các trường văn bản và "đặt lại" hoặc unsetmàu sắc khi chúng được nhấp vào bên trong.

Có một cái nhìn ở đây cho một ý tưởng về cách bắt đầu xử lý OnClicksự kiện:

https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

— J. Scott Elblein
nguồn

0

Chỉ cần thêm onfocusthuộc tính

Javascript

function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    document.getElementById("username").style.borderColor = "red";
    return false;
  }
  if (password == "") {


    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    document.getElementById("password").style.borderColor = "red";
    return false;
  }

}

function myfunction(var id){
 document.getElementById(id).style.borderColor = "green";
 document.getElementById(id).style.background-color= "yellow";
}

Html

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" onfocus="myFunction('username')" name="username" placeholder="USERNAME">
  <br>
  <input id="password" type="password" onfocus="myFunction('password')" name="password" placeholder="PASSWORD">
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

— Hasan_Naser
nguồn

-1

Bởi vì khi bạn thêm màu từ javascript hoặc bất kỳ thuộc tính nào của css, nó đã thêm nội tuyến, vì vậy chỉ cần viết tiêu điểm border-color !important.

— Saurabh Srijan
nguồn