Code details of HTML 5 default bubble modification

Time:2020-4-9

HTML5 default bubble modification

Default browser bubble style:

Google browser

 
 

Firefox

 
 

IE browser

 
 

Before Google 29, pseudo elements can be used for modification:

:: – WebKit validation bubble has been abandoned!!!

New solutions:

Design sketch:

 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        .container{margin:100px;font-size:14px;position: relative;}
        .item{position: relative;width:250px;height:40px;margin-bottom: 10px;}
        input{width:250px;height:20px;line-height:20px;border-radius: 4px;border:1px solid #999;color:#999;margin-bottom:10px;padding:5px;position: absolute;left:66px;}
        input:focus{border:2px solid rgb(90,152,210);}
        .item label{position: absolute;left:0;top:5px;}
        input[type=submit]{height:30px;line-height:20px;position:absolute;left:0;background-color: rgb(90,152,210);color:#fff;width:60px;}
        .error-msg{
            color: red;
            font-size: 12px;
            position: absolute;
            bottom: -8px;
            left: 65px;
            width: 329px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="#" id="form">
            <div class="item">
                < label for = "username" > user name < / label >
                <input type="text" id="username" required pattern="^1[0-9]{10}$">
            </div>
            <div class="item">
                < label for = "password" > email < / label >
                <input type="email" id="email" required>
            </div>
            < input type = "submit" value = "submit" id = "submit" >
        </form>
    </div>
    <script>
        function myui(form){
            //Block default bubbles
            form.addEventListener("invalid",function(e){
                e.preventDefault();
            },true)
            //Note to set to true
            //When the cancelable of the event object is false, there is no default behavior. Even if there is a default behavior, calling preventdefault will not work

            //Block form submission if validation fails
            form.addEventListener("submit",function(e){
                if(!this.checkValidity()){
                    e.preventDefault();
                }
                
            },true)

            //Click submit to trigger the event
            submit.addEventListener("click",function(e){
                var invalids=form.querySelectorAll(":invalid"),
                    errMsgs=form.querySelectorAll(".error-msg"),
                    parent;

                //Loop, clear all error messages added last time
                for(var i=0;i<errMsgs.length;i++){
                    errMsgs[i].parentNode.removeChild(errMsgs[i]);
                }

                //Loop, add new error message
                for(var i=0;i<invalids.length;i++){
                    parent=invalids[i].parentNode;
                    /*
                    element.insertAdjacentHTML(position, text);
                    Before begin: the front of the element itself.
                    AfterBegin: before inserting the first child node inside the element.
                    Before end: after inserting the last child node inside the element.
                    Afterend: after the element itself.
                    Text is a string to be parsed into HTML or XML and inserted into the DOM tree

                     */
                    parent.insertAdjacentHTML("beforeend","<div class='error-msg'>"+invalids[i].validationMessage+"</div>");
                }

                //If there is an error message, give the first error message a focus
                if(invalids.length>0){
                    invalids[0].focus();
                }
            })
        }
        myui(form);
    </script>
</body>
</html>

 summary

This article introduces the code details of HTML 5 default bubble modification. For more information about HTML 5 default bubble modification, please search previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!