Question

大家好我创建了一个HTML5表单并对其进行了验证。

我使用名为modernizr的js插件来支持降低版本，但即使我这样做了

在较低版本的浏览器上仍然看起来很混乱

这是我的HTML代码：

    <!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<title>HTML5/CSS3 VALIDATION FORM</title>
<link rel="stylesheet" media="screen" href="style.css">
<script src="js/modernizr-latest.js"></script>
</head>


<body>
<form class="vform" method="post" action="" name="vform">
    <ul>
        <li>
             <h2><span><img src="img/rocket.png"></span> Send Us Your Feedback</h2>

        </li>
        <li>
            <input type="text" class="name" name="name" placeholder="Your Name (Required)" required />
        </li>
        <li>
            <input type="email" class="email" name="email" placeholder="Your Email (Required)" required /> <span class="suggestion">Follow Format: youremail@email.com</span>

        </li>
        <li>
            <textarea name="message" class="message" placeholder="Enter your feedback (Required)" cols="40" rows="8" required></textarea>
        </li>
        <li>
            <button class="submit" type="submit">Submit</button>
            <input class="reset" type="reset" value="Reset" />
        </li>
    </ul>
</form>
</body>
</html>

这是CSS代码：

/*= GENERAL STYLES
--------------------------------------------------------*/
body {
    background: #61a49d;
    font-family: Arial;
}

h2 {
    font-size: 20px;
    color: #777777;
    font-family: Arial;
    font-weight: normal;
    margin: 0 0 20px 0;
    border-top: 1px dashed #cacaca; 
    border-bottom: 1px dashed #cacaca; 
    padding: 13px 0; 
}



/*= LIST STYLES
--------------------------------------------------------*/

.vform ul {
    list-style-type:none;
    width: 500px;
    margin: 100px auto;
    border: 1px solid #d2e1e7;
    padding:15px;
    background: #f9f9f9;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}


.vform li {
    margin: 10px 0 0 0;
    position:relative;
}



/*= FORM STYLES
--------------------------------------------------------*/

.vform input, .vform textarea {
    padding:10px 130px 10px 10px;
    border:2px solid #d2e1e7;
    -moz-transition: padding .27s;
    -webkit-transition: padding .27s;
    -o-transition: padding .27s;
    transition: padding .27s;
    font-size: 14px;
    font-family: Arial;
    color: #898989;

}


.vform input:focus{
    padding-right:165px;
    background: #fff;
    box-shadow: 0 0 2px #acd1e0;
    border:2px solid #acd1e0;

}

.vform textarea:focus {
    padding-right:205px;
    background: #fff;
    box-shadow: 0 0 2px #acd1e0;
    border:2px solid #acd1e0;
}



button.submit {
    color: #fff;
    background: #96aa39;
    font-weight: normal;
    padding: 10px 25px;
    text-align: center;
    border: none;
    cursor: pointer;
}


button.submit:hover {
    background: #7c8f23;
}



input.reset, input.reset:focus {
    color: #fff;
    background: #e6655d;
    font-weight: normal;
    padding: 10px 25px;
    text-align: center;
    border: none;
    cursor: pointer;
}


input.reset:hover {
    background: #f1372b;
}

.suggestion {
    background: #e6655d;
    color: #fff;
    position: absolute;
    margin-left:6px;
    padding: 2px 8px;
    font-size: 13px;
    font-style: italic;
    z-index: 1000;
    display: none;
}


.suggestion::before {
    content:"\25C0";
    position: absolute;
    color:#e6655d;
    left:-7px;
    top:5px;
}


.vform input:focus + .suggestion {
    display: inline;
}
.vform input:required:valid + .suggestion::before {
    color:#28921f;
}
.vform input:required:valid + .suggestion {
    background: #28921f;
}



/*= FORM ICON STYLES
--------------------------------------------------------*/

.vform input.name{
   background-image: url('img/name.png');
   background-repeat: no-repeat;
   background-position: top right;
   background-position-y: -1px;
}

.vform input.email{
   background-image: url('img/email.png');
   background-repeat: no-repeat;
   background-position: top right;
   background-position-y: -1px;
}

.vform textarea.message{
   background-image: url('img/message.png');
   background-repeat: no-repeat;
   background-position: top right;
   background-position-y: -1px;
}



/*= PLACEHOLDER STYLES
--------------------------------------------------------*/

*::-webkit-input-placeholder {
    color: #c8c8c8;
    font-size: 14px;
    font-family: Arial;
}    

*:-moz-placeholder {
    /* FF 4-18 */
    color: #c8c8c8;
    font-size: 14px;
    font-family: Arial;
}

*::-moz-placeholder {
    /* FF 19+ */
    color: #c8c8c8;
    font-size: 14px;
    font-family: Arial;
}    

*:-ms-input-placeholder {
    /* IE 10+ */
    color: #c8c8c8;
    font-size: 14px;
    font-family: Arial;
}

有任何帮助吗？不知道如何使其适用于较低版本的浏览器esp。 IE6 +。

如果不是太多，你可以给我一个网站，我可以测试我的创作到多个较低版本的浏览器。无法找到一个免费的。

感谢。

Answer 1

不幸的是，Modernizr不会添加HTML5验证支持。 Modernizr是一种功能检测工具，它允许您检测某个功能是否可用，如果不可用，则必须提供替代功能。

您可以在此处查看浏览器对本机HTML5表单验证的支持：http://caniuse.com/#feat=form-validation

如果您正在使用jQuery，我建议使用jQuery Validation Plugin：jqueryvalidation.org /

使用您当前的表单标记，您应该能够只包含该插件并使用以下命令启动它：

$(function() {
    $("form.vform").validate();
});

这是一个jsfiddle，您可以在其中看到标记的工作实现：http://jsfiddle.net/MLcgf/

HTML5表单不适用于其他较低版本的浏览器

1 个答案: