2013-08-21 22 views
0

我的代碼很好,但工作正常,但驗證不起作用姓和名。但如果從名和姓中刪除,那麼工作正常。同樣的地址。波紋管是代碼。誰看到我在哪裏錯了。jQuery驗證插件不能使用值屬性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#contact_form").validate({ 
     submitHandler: function(form) { 
      $('#span_capthca').hide().html('<h3>Processing.......</h3>').slideDown(1000); 
      $.ajax({ 
       type: 'POST', 
       cache: false, 
       url: 'ajax-response.php', 
       data: 'recaptcha_response_field='+$('#recaptcha_response_field').val()+'&recaptcha_challenge_field='+$('#recaptcha_challenge_field').val(), 
       success: function(data) { 
        if(data){ 
         var obj = jQuery.parseJSON(data); 
         if(obj.response==1){ 
          $('#span_capthca').hide().html('<label class="error">Invalid Captcha.</label>').slideDown(1000); 
          //alert("incorrect Captcha"); 
          return false; 
         }else{ 
          //alert("correct"); 
          var form = $('#contact_form'); 
          var post_url = form.attr('action'); 
          var post_data = form.serialize(); 
          $.ajax({ 
           type: 'POST', 
           url: post_url, 
           data: post_data, 
           success: function(msg) { 
            $(form).fadeOut(500, function(){ 
             form.html(msg).fadeIn(); 
            }); 
           } 
          }); 
         } 
        }else{ 

        } 
       } 
      }); 

     } 
    }); 
}); 


</script> 
</head> 

<body> 
<form id="contact_form" name="form1" method="post" action="process_contact.php"> 
<div class="frmleft"> 
<input type="text" name="fName" id="fName" class="required form-input" value="Enter Your First Name" onblur="if(this.value == '') { this.value='Enter Your First Name'}" onFocus="if (this.value == 'Enter Your First Name') {this.value=''}"/> 
<div class="cls"></div> 
<input type="text" name="lName" id="lName" class="required form-input" value="Enter Your Last Name" onblur="if(this.value == '') { this.value='Enter Your Last Name'}" onFocus="if (this.value == 'Enter Your Last Name') {this.value=''}"/> 
<div class="cls"></div> 
<input type="text" name="Phone" id="Phone" class="required number form-input" value="Enter Your Phone Number" onblur="if(this.value == '') { this.value='Enter Your Phone Number'}" onFocus="if (this.value == 'Enter Your Phone Number') {this.value=''}"/> 
<div class="cls"></div> 
<input type="text" name="Email" id="Email" class="required email form-input" value="Enter Your E-mail" onblur="if(this.value == '') { this.value='Enter Your E-mail'}" onFocus="if (this.value == 'Enter Your E-mail') {this.value=''}"/> 
<div class="cls"></div> 
<textarea name="Address" id="Address" cols="" rows="" class="required form-input" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">Your Address</textarea> 
</div> 
<div class="frmright"> 
<textarea name="Comments" id="Comments" cols="" rows="" class="required form-input" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">Your Enquiry</textarea> 
<div class="cls"></div> 
<input name="submit" type="submit" id="submit" value="Send Us" class="sbtbutton"> 
</div> 
</form> 
</body> 
</html> 

現場演示http://jsbin.com/AmeWuda/1/edit

回答

0

當然,你無法驗證一個字段作爲required當你已經輸入的數據到它與value屬性。

您應該使用placeholder屬性代替。

<input type="text" name="first_name" placeholder="first name" /> 

工作DEMOhttp://jsfiddle.net/wuxMf/

那麼你也可以消除這些醜陋的直列onbluronfocus屬性和它們的JavaScript函數。 (如果您確實需要使用onbluronfocus事件處理程序,則可以使用jQuery代替它們。)