如何使用JQuery驗證表單中的textarea？

-1

我已經創建了驗證表單。但是我在Comment或textarea中面臨的驗證問題。我正在使用必需的字段，但在textarea我不使用所需的自動文本區域顯示如所需&當我運行&後在textarea中寫入任何東西，驗證始終在。我能做什麼。我在哪裏做錯了。請幫忙。如何使用JQuery驗證表單中的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>

來源

2014-07-16 sam

正確地關閉你的'

' – singe3

這裏我只寫了工作部分...我寫完整的代碼...？ @ singe31 – sam

請幫助我們...... – sam

只需添加所需的textarea。

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

這對我是有效的。

來源

2014-07-16 11:47:10

我已經這樣做...但不工作...驗證textarea顯示，如果我使用「必需」或不... ...每當我寫任何東西在textarea然後它也顯示紅色... – sam

可以你給我一個小提琴或任何演示？ –

如何使用JQuery驗證表單中的textarea？

回答

相關問題