Question

我的代码很好并正常工作，但验证不起作用名称和姓氏。但如果从frist名称和姓氏中删除值，那么工作正常..同样的地址。吼叫是代码。谁能看出我在哪里误会。

<!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

Answer 1

当然，当您已使用required属性向其输入数据时，您无法将字段验证为value。

您应该使用placeholder属性。

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

工作演示：http://jsfiddle.net/wuxMf/

然后，您还可以消除那些丑陋的内联onblur和onfocus属性及其JavaScript函数。 （如果您确实需要使用onblur和onfocus事件处理程序，则可以使用jQuery编写它们。）

jQuery Validation插件不适用于value属性

1 个答案: