CSS + JS Alert in HTML

JavaScript
1

How we make error/invalid/empty/ alert message show in red box like mentioned in image.

720×532 35.2 KB

I am using this code but not using java… Becouse I have bit knowledge about java …

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
              

                                        <meta http-equiv="content-type" content="text/html; charset=utf-8">
                
                <title>Client Log In</title>

                <Style>body{background-color:#f9f9f9}body,input,button{color:#444;font:12px "Lucida Sans Unicode","Lucida Grande",sans-serif}a{color:#2e6e9e}#login{position:absolute;top:50%;left:50%;margin:-230px 0 0 -258px;width:500px;background:#fff}#login{border:5px
solid #5e9dcd;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 2px 5px #4e707c;-webkit-box-shadow:0 2px 5px #4e707c;box-shadow:0 2px 5px #4e707c}#login a:hover{color:#111}#login
h1{margin-bottom:24px;padding:12px
23px;color:#fff;font-size:14px;border:0;border-bottom:1px solid #007dab;background-color:#5e9dcd;text-shadow:0 1px 0 #007dab}#login
p{margin:10px
25px}#login
p.register{position:absolute;top:-40px;right:0;margin:0;line-height:30px;font-size:11px}#login
div{margin:5px
25px;padding:4px;text-align:right;background-color:#eee;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#login
label{float:left;padding-left:10px;line-height:30px}#login
input.field{padding:4px;width:280px;font-size:12px;border:1px
solid #c1c1c1;box-shadow:0 1px 4px rgba(0, 0, 0, 0.16) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.16) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.16) inset}#login
div.submit{margin:0
25px;text-align:left;background:none}#login div.submit
label{display:inline;float:none;font-size:11px}#login
button{float:right;padding:0
30px;height:30px;line-height:30px;text-align:center;font-size:12px;color:#fff;text-shadow:0 1px 0 #007dab;cursor:pointer;border:0;background:#5e9dcd;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}#login
p.forgot{text-align:right;font-size:11px}#login
p.back{padding:2px
0;text-align:left;font-size:11px;border-top:1px solid #eee}#login
#message{position:relative;display:block;margin:0
25px 10px;padding:8px
8px 8px 30px;text-align:left}#login #message .ui-icon{position:absolute;top:50%;left:7px;margin-top:-8px}#footer{position:absolute;bottom:10px;left:0;width:100%;color:#666;font-size:11px;text-align:center}</style>
        </head>
        <body>

                <div id="notify-top"><ul></ul></div>
                <div id="notify-right"><ul></ul></div>
                <div id="notify-overlay" class="ui-widget-overlay"></div>
                
                <form id="login" method="post" action=" ">

                        <h1>Welcome! Please enter your credentials to log in</h1>
                
        
                <div>
                <label for="client">Client ID or E-mail:</label>
                <input class="field required" type="text" name="client">
        </div>

        <div>
                <label for="password">Password:</label>
                <input class="field required" type="password" name="password">
        </div>

        <p class="forgot">
                <a href="/lostpassword.html" title="Forgot your password?">Forgot your password?</a>
        </p>

        <div class="submit">

                    
                <label>&nbsp;</label>
                <button type="submit">Log in</button>

        </div>
        
        <p class="back"></p>

</form>               
                
                <div id="footer">
                        &copy; Copyright 2003 - 2018 - All rights reserved.                </div>
                
        </body>
</html>
2

Are you referring to JavaScript or Java? These are two totally different languages. I think you mean JavaScript.

You can also make a message like this in PHP when you do your server-side validation.

3

Are you asking how to create an alert message when the fields have not been completed, or how to style an alert message tto look like the one in the image?

4

I mean how we make like that alert when filed having some error, invalid, empty, etc.

5

Oops!! Sorry, I meant JavaScript.

6

I’m presuming you’ve copied this from another site. (The “Copyright 2003 - 2018” gives me that impression, among other things.) Why not look at the JS on that site and see how it is done there?

7

The HTML you’ve provided does not contain the error message, which suggests you’ve acquired it using view source, rather than the version rendered in the DOM. It would appear that the error message has been injected using JavaScript at some point. It would be useful if we could see the JavaScript from the page concerned.

1 Like
8

No actually I was not think about that what I edit bottom of the page becouse generally I seen on every website at footer some copyright year, and all rights reserved text mentioned same thing happened with me. I also want to make this page looking pretty that why I use 2003 to 2018 . From 2003 becouse I joined the primary school. And 2018 becouse this is currently year.

I am not copy from other website…

I make that alert via PicArt App in mobile and designed it…

9

Suppose show error when minlength 5 or maxlength is 10. If visit enter below 5 and above 10 show error

<input type="text" name "demo" minlength="5" maxlength="10">

If textbox is required and when it empty

<input type="text" name "demo" required>

When required title show like

<input type="text" name "demo" pattern=" " title="Please enter your client" required>
11

Really? Because it looks almost exactly like the form found on this page: https://cp1.runhosting.com/beta/login/?next=start&notice=login, right down to the copyright notice and the classes used in the HTML.

5 Likes
12

I was don’t know about it … that it is bit looks likes me…
But My look is different …:fearful:
It just a coincidence

13

Error CSS CODE IS



.errorbox {border:1px solid #aa0000; margin:0px; margin-top:5px; margin-bottom:5px; background-color:#fff0f0; padding-top:5px; padding-bottom:5px; padding-left:5px; padding-right:5px;}
.errortitle {color:#cc0000; font-size:12pt; font-weight:bold;}

What would be the Js

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.