0

我正在尝试创建一个简单的 html5 表单验证，目前它可以在 chrome 上运行，但有一个错误，当用户输入无效值时，电子邮件输入的验证消息不会出现。它也不适用于 IE 和 Firefox。

这是我当前的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Validation message</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<style>

    h1
    {
        margin:0px;
        margin-bottom:6px;
        font-size:1.4em;
    }

    /*fielset
    {
        width:500px;
    }*/

    label
    {
        display:block;
    }

    .none
    {
        display:none;
    }

    .rules
    {
        display:inline;
    }

    input
    {
        border:1px solid #999;
    }

    input:valid
    {
        background:#fff;
    }

    input:invalid
    {
        background:#fcc;
        color:#333;
    }

    .vmsg
    {
        border:1px solid #ccc;
        background-color: #eee;
        padding:4px;
        font-size:0.8em;
        border-radius:5px;
    }


</style>

</head>

<body>
    <form>
        <fieldset>
            <h1>Change Email Adress</h1>
            <label>Username:</label>
            <input type="text" id="username" pattern="[a-zA-Z ]{5,}" placeholder="Username" maxlength="30" required />
            <div id="usernameRules" class="rules">
                <span class="valueMissing vmsg none">The username is required.</span>
                <span class="patternMismatch vmsg none">The username must be a series of alphabetical characters.</span>
            </div>
            <label>Email:</label>
            <input type="email" id="email" name="email" placeholder="Email" required />
            <div class="emailRules" class="rules">
                <span class="valueMissing vmsg none">An email address is required</span>
                <span class="typeMismatch vmsg none">Special characters are not allowed</span>
            </div>

            <div>
                <button type="submit" id="submit" name="submit">Change</button>
                <input type="button" id="checkValidation" name="checkValidation" value="Validate" />
            </div>


        </fieldset>
    </form>

    <script>
        var ruleNames = new Array();
        $(function(){

            //Fills array with rule names.
            //Looks for all elements with 'vmsg' class and then adds
            //the first class (rule name) to the array.
            $(".vmsg").each(function(index, element) {
                if(element.className.indexOf(" ") != -1){
                    ruleNames[index] = element.className.split(" ")[0]; 
                    console.log(ruleNames[index]);
                }
            });

            //Attaches validation event handlers to all input 
            //elements that are Not buttons.
            $(":input:not(:button)").each(function(index, element) {
                this.oninvalid = validationFail;
                this.onblur = validate;
            });

            /*$("#checkValidation").click(function(){
                validate;
            });*/
            document.getElementById("checkValidation").onclick = validate;

        });

        function validate(){
            $(".vmsg").addClass("none");
            document.forms[0].checkValidity();
            //$("form").checkValidity();    
        }

        //Check each input element to determine which
        //element is invalid. Once an invalid state is
        //detected, then loop through the validation rules
        //to find out which is brokern and therefore which
        //message to display to the user
        function validationFail(e){

            /*
                    var elem, evt = e ? e:event;
                if (evt.srcElement){  
                    elem = evt.srcElement;
                }
                else if (evt.target){
                    elem = evt.target
                }
            */

            var element = e.srcElement;

            var validity = element.validity;
            var id = element.id;

            if(!validity.valid){
                for(var i = 0; i < ruleNames.length; i++){
                    checkRule(validity,ruleNames[i], id)
                }
                e.preventDefault();
            }
        }

        //Uses the instance of the input element's
        //ValidityState object to run a validation rule.
        //If the validation rule returns 'true' then the
        //rule is broken and the appropriate validation
        //message is exposed to the user.
        function checkRule(validity,ruleName, id){
            if(eval("validity." + ruleName)){
                //pattern: '#emailRules .valueMissing'
                $("#" + id + "Rules ." + ruleName).removeClass("none");
            }
        }

    </script>

</body>
</html>

先生/女士，您的回答会很有帮助。谢谢++

4

1 回答 1

0

我无法重现节点本身不工作http://jsfiddle.net/HKAHZ/
所以也许你的问题在其他地方。

为什么不使用这样的 CSS

:invalid + .rules > .typeMismatch {display: block;}

如果错误消息被忽略，则required标志负责处理错误消息，然后您只需仔细检查服务器端。

于 2013-06-10T16:04:42.907 回答