hiển thị một mờ dần jQuery Alert tin nhắn mà không sử dụng javascript truyền thống cảnh báo hộp

Question

Tôi đã theo form dưới đây, câu hỏi của tôi đang triển khai một fadding nhắn JQuery Alert mà không sử dụng alertBox js bình thường

Mẫu Html

 <form name="userLogin" action="success.php" onsubmit="validateInputField()" method="post"> 
     UserName: <input type="text" name="username" placeholder="Username"> 
     password: <input type="password" name="pwd" placeholder="Password"> 
     <input type="submit" value="Submit"> 
     </form> 

đang

JavaScript

<script> 
    function validateInputField() { 

     var x = document.forms["userLogin"]["username"].value; 
     var y = document.forms["userLogin"]["pwd"].value; 

     if (x == null || x == "") { 

     alert("Name must be filled out"); 

    return false; 
    } 
      if (y == null || y == "") { 

     alert("Password must be filled out"); 

    return false; 
    } 
} 
</script> 

Answer 1

Bạn chỉ có thể thêm một div và hiển thị thông báo lỗi của bạn trong vòng div đó và sử dụng fadeIn và fadeOut để tạo hiệu ứng giống nhau.

function validateInputField() { 
 

 
    var x = document.forms["userLogin"]["username"].value; 
 
    var y = document.forms["userLogin"]["pwd"].value; 
 

 
    if (x == null || x == "") { 
 
    $(".alert").find('.message').text("Name must be filled out"); 
 
    $(".alert").fadeIn("slow",function(){ 
 
     setTimeout(function(){ 
 
     $(".alert").fadeOut("slow"); 
 
     },4000); 
 
    }); 
 
     
 

 
    return false; 
 
    } 
 
    if (y == null || y == "") { 
 

 
    $(".alert").find('.message').text("Name must be filled out"); 
 
    $(".alert").fadeIn("slow",function(){ 
 
     setTimeout(function(){ 
 
     $(".alert").fadeOut("slow"); 
 
     },4000); 
 
    }); 
 
    return false; 
 
    } 
 
}

.hide { 
 
    display: none; 
 
} 
 
.alert { 
 
    background: red; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 40%; 
 
    padding:20px; 
 
} 
 
.message { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="userLogin" action="success.php" onsubmit="validateInputField()" method="post"> 
 
    UserName: 
 
    <input type="text" name="username" placeholder="Username">password: 
 
    <input type="password" name="pwd" placeholder="Password"> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
<div class="alert hide"> 
 
    <div class="message"> 
 
    </div> 
 
</div>

Để được tối ưu hóa hơn

function validateInputField() { 
 

 
    var x = document.forms["userLogin"]["username"].value; 
 
    var y = document.forms["userLogin"]["pwd"].value; 
 

 
    if (x == null || x == "") { 
 
    showAlert("Name must be filled out"); 
 
    return false; 
 
    } 
 
    if (y == null || y == "") { 
 
    showAlert("Password must be filled out"); 
 
    return false; 
 
    } 
 
} 
 

 
function showAlert(message) { 
 
    $(".alert").find('.message').text(message); 
 
    $(".alert").fadeIn("slow", function() { 
 
    setTimeout(function() { 
 
     $(".alert").fadeOut("slow"); 
 
    }, 4000); 
 
    }); 
 
}

.hide { 
 
    display: none; 
 
} 
 
.alert { 
 
    background: red; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 40%; 
 
    padding:20px; 
 
} 
 
.message { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="userLogin" action="success.php" onsubmit="validateInputField()" method="post"> 
 
    UserName: 
 
    <input type="text" name="username" placeholder="Username">password: 
 
    <input type="password" name="pwd" placeholder="Password"> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
<div class="alert hide"> 
 
    <div class="message"> 
 
    </div> 
 
</div>

Answer 2

Tại sao không t make your own?

Một đơn giản fadeIn() và fadeOut() có thể tạo ra một thực sự mát mẻ "alert-box" và là siêu dễ sử dụng :)