Question

我创建了验证表单。但是我在评论或textarea验证时面临的问题。我正在使用必填字段，但在textarea我没有使用要求自动文本区域是必要的显示＆amp;当我跑步＆amp;在textarea中写任何东西后，验证始终开启。我能做什么。我在哪里做错了。请帮助。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body
{
    margin:0px;
    padding:0px;
    font-family: 'Open Sans', sans-serif;
}
.right
{
    margin:0px;
    padding:0px;
    width:50%;
    float:left;
    height:200px;
}
.left
{
    margin:0px;
    padding:0px;
    width:50%;
    float:left;
}
/*contact css start*/
.contact-con { margin:0 36px; padding:0px; display:block; font-size:14px; color:#996600;}
.contact-right { float:left; margin:0px; padding:0px; width:50%;}
.contact-left { float:left; margin:0px; padding:0px; width:50%;}
.contact-left ul { margin:0 20px 0 0; padding:0px;}
.contact-left ul li { margin:0 0 10px; padding:0px; list-style:none;}
.contact-left ul li label { font-size:14px; color:#996600; display:block; margin-bottom:8px;}
.input-1 {font-family: 'Open Sans', sans-serif; border:1px solid #cccccc; font-size:14px; border-radius:4px; width:100%; padding:5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.txtarea-1 {font-family: 'Open Sans', sans-serif; border:1px solid #cccccc; font-size:14px; border-radius:4px; width:100%; padding:5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; resize:none; height:80px;}
.contact-right ul { margin:28px 0 0 20px; padding:0px; font-size:16px;}
.contact-right ul li { margin:0 0 14px; padding:0px; list-style:none;}
.contact-img { margin:30px 0 0 20px; }
.contact-img img { width:100%;}
.btn-1 { background-color:#000000; margin-top:20px; font-size:18px; color:#ffffff; width:110px; height:40px; line-height:36px; border:none; float:left; border-radius:4px; text-transform:uppercase; cursor:pointer;}
.btn-1:hover { background-color:#333333;}
.logo-con { text-align:center; display:block; margin-bottom:35px;}
.contact-right h1 { margin:0 0 0 20px; padding:0px; color:#333333; font-size:25px; color:#996600;}
/*contact css end*/
</style>


<style type="text/css">
        .validationError {
            border: solid 2px red;
        }
        .validationValid {
            border:  solid 2px green;
        }
    </style>


</head>

<body>

<div class="right"></div>
<div class="left">
<!--contact html start-->

<div class="contact-con">
<div class="logo-con"><img src="images/logo1.png"/></div>   
<form id="customerForm">
<div class="contact-left">

<ul>
<li><label>Name</label>
<input class="input-1" type="text" required/>
</li>
<li><label>Email</label>
<input class="input-1" type="text" required/>
</li>
<li><label>Best Phone</label>
<input class="input-1" type="text" required/>
</li>
<li><label>Comments</label>
<textarea class="txtarea-1"></textarea>
</li>
<li><label>Please verify that you are human</label>
<img src="images/captch-img.png"/>
<input class="input-1" type="text"/>
</li>
<li><input type="submit" class="btn-1" value="Submit"/></li>
</ul>
</div>
</div>
<!--contact html end-->
</div>
</form>
</body>



<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.h5validate.js"></script>


    <script type="text/javascript">

        // Enable h5Validate plugin
        $("#customerForm").h5Validate({
            errorClass: "validationError",
            validClass: "validationValid"
        });

        // Prevent form submission when errors
        $("#customerForm").submit(function (evt) {
            if ($("#customerForm").h5Validate("allValid") === false) {
                evt.preventDefault();
            }
        });

    </script>
</html>

Answer 1

只需将所需内容添加到textarea即可。

<textarea class="txtarea-1" required></textarea>

这对我来说是有效的。

如何使用JQuery验证表单中的textarea？

1 个答案: