Tôi đã có giải pháp cho vấn đề này, thay vì tạo kiểu cho nó so với cấp độ gốc.
Tôi đặt hiển thị thành khối nội tuyến cho thông báo xác thực.
Vì vậy, toàn bộ kiểu dáng như sau [dường như tôi không thể chỉnh sửa bài đăng gốc của mình]
/* This is to style the black box containing the text [you can fiddel around with this to position it above, below, right or left] */
select ~ .ValidationMessage, input ~ .ValidationMessage {
visibility: hidden;
width: 120px;
display: inline-block;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
z-index: 1;
top: 35px;
right: 5%;
margin-left: -60px;
}
/* This is the show a little arrow pointing to our input [you can fiddle around with this to get an arrow to the left, right, above or bottom] */
select ~ .ValidationMessage, input ~ .ValidationMessage::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
/* When hovering on top of a input we want to show the validation message [you can change hover to active or focus if you like] */
select:hover ~ .ValidationMessage, input:hover ~ .ValidationMessage {
visibility: visible;
}
/* Create a nice reddish border if the input is not valid */
select.Not_Valid, input.Not_Valid {
visibility: visible;
outline: none;
border: 1px solid rgba[255, 0, 0, 0.7];
box-shadow: 0px 0px 10px orangered;
} Ví dụ này xác thực các trường bắt buộc cũng như các trường yêu cầu một định dạng cụ thể. Khi xác định được lỗi, tập lệnh sẽ chèn danh sách các thông báo lỗi vào DOM và di chuyển tiêu điểm đến chúng
Mã HTML và Javascript
Đây là HTML cho mẫu ví dụ
Form Validation
Hôm nay, chúng tôi muốn chia sẻ với các bạn cách hiển thị thông báo lỗi bên dưới hộp văn bản trong xác thực javascript. Trong bài đăng này, chúng tôi sẽ cho bạn thấy xác thực biểu mẫu javascript hiển thị thông báo lỗi bên cạnh đầu vào, hãy nghe xác thực biểu mẫu javascript với tất cả các thông báo lỗi cùng một lúc, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để triển khai. Trong bài viết này, chúng ta sẽ tìm hiểu về cách hiển thị thông báo lỗi trong javascript mà không có cảnh báo với một ví dụ
cách hiển thị thông báo lỗi bên cạnh hộp văn bản bằng javascript?
nội dung
- cách hiển thị thông báo lỗi bên cạnh hộp văn bản bằng javascript?
- Bài viết liên quan
Mã HTML
Sign In
E-mail address
Password
Mã JavaScript
$['form'].on['submit', function [e] {
var focusSet = false;
if [!$['#customer_email_address'].val[]] {
if [$["#customer_email_address"].parent[].next[".validation"].length == 0] // only add if not added
{
$["#customer_email_address"].parent[].after["Please enter customer_email_address address"];
}
e.preventDefault[]; // prevent form from POST to server
$['#customer_email_address'].focus[];
focusSet = true;
} else {
$["#customer_email_address"].parent[].next[".validation"].remove[]; // remove it
}
if [!$['#user_password_input'].val[]] {
if [$["#user_password_input"].parent[].next[".validation"].length == 0] // only add if not added
{
$["#user_password_input"].parent[].after["Please enter password"];
}
e.preventDefault[]; // prevent form from POST to server
if [!focusSet] {
$["#user_password_input"].focus[];
}
} else {
$["#user_password_input"].parent[].next[".validation"].remove[]; // remove it
}
}];
Mã CSS
@charset"utf-8";
@import url[//weloveiconfonts.com/api/?family=fontawesome];
@import url[//meyerweb.com/eric/tools/css/reset/reset.css];
[class*="fontawesome-"]:before {
font-family:'FontAwesome', sans-serif;
}
body {
background-color: #C0C0C0;
color: #000;
font-family:"Varela Round", Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-appearance: none;
}
#form_signin {
margin: 50px auto;
width: 400px;
}
#form_signin h2 {
background-color: #f95252;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
color: #fff;
font-size: 28px;
padding: 20px 26px;
}
#form_signin h2 span[class*="fontawesome-"] {
margin-right: 14px;
}
#form_signin fieldset {
background-color: #fff;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
padding: 20px 26px;
}
#form_signin fieldset p {
color: #777;
margin-bottom: 14px;
}
#form_signin fieldset p:last-child {
margin-bottom: 0;
}
#form_signin fieldset input {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#form_signin fieldset input[type="email"], #form_signin fieldset input[type="password"] {
background-color: #eee;
color: #777;
padding: 4px 10px;
width: 328px;
}
#form_signin fieldset input[type="submit"] {
background-color: #33cc77;
color: #fff;
display: block;
margin: 0 auto;
padding: 4px 0;
width: 100px;
}
#form_signin fieldset input[type="submit"]:hover {
background-color: #28ad63;
}
Tôi hy vọng bạn có ý tưởng về thông báo lỗi hiển thị bên dưới trường nhập bằng cách sử dụng jquery.
Tôi muốn có phản hồi về infinityknow của mình. blog com.
Phản hồi, câu hỏi hoặc nhận xét có giá trị của bạn về bài viết này luôn được hoan nghênh.
Nếu bạn thích và thích bài đăng này, đừng quên chia sẻ.
Bài viết liên quan
- làm cách nào để hiển thị thông báo lỗi trong javascript mà không có cảnh báo?
- javascript Xác thực biểu mẫu Mã nguồn
- Cách hiển thị Thông báo lỗi xác thực tùy chỉnh trong laravel
- Ví dụ xác thực biểu mẫu Reactjs với Demo
- cách chỉ cho phép xác thực số điện thoại di động gồm 10 chữ số bằng cách sử dụng javascript với jquery
- trình chiếu php trong mã nguồn javascript
- Xác thực nút radio trong jquery
- biểu mẫu đăng ký xác thực javascript
- xác thực biểu mẫu jquery mà không cần plugin
- Chương trình máy tính cơ bản sử dụng javascript sử dụng các chức năng