jQuery验证 - 立即错误删除不起作用

时间:2011-11-08 15:45:10

标签: jquery jquery-validate errorplacement

好吧,我已经使用了jQuery Validate很多次,但从来没有遇到过这个问题......我有一个带输入和一些单选按钮的简单表单。一切正常,它显示无效字段的错误,但不起作用的是一旦它有效就LIVE删除错误。对于无线电选择,它会立即消失,但对于其他任何字段都不会消失。

一旦字段有效,我总是把它移除。有人能告诉我我做错了什么吗?我尝试改变一切,我完全被难倒了。

非常感谢任何帮助!

以下代码:

http://filmdemic.com/apps/paypaltest/index2.php

<!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>PayPal Website Payments Pro - Transaction Test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.clearfield.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.9.0/jquery.validate.js" ></script>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <h2>PayPal Website Payments Pro - doDirectPayment Test</h2>
        </div><!-- end #header -->
        <div id="content">
            <div id="form">
                <h3>Form:</h3>
                <form id="paypal_test_form" name="paypal_test_form" class="test_form"  method="POST" action="pp_DoDirectPaymentReceipt.php">
                    <ul>
                        <li class="clearfixit amounts">
                        <h4>Amount</h4>
                        <table id="amount_table" width="760px" border="0" cellspacing="1" cellpadding="1">
                            <tr>
                                <td>
                                 <span class="input_wrap">
                                    <input id="amount1" type="radio" name="amount" value="5.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount1">$5.00 USD</label>
                                 </span>
                                </td>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount2" type="radio" name="amount" value="10.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount2">$10.00 USD</label>
                                </span>
                                </td>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount3" type="radio" name="amount" value="20.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount3">$20.00 USD</label>
                                </span>
                                </td>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount4" type="radio" name="amount" value="50.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount4">$50.00 USD</label>
                                </span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount5" type="radio" name="amount" value="100.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount5">$100.00 USD</label>
                                </span>
                                </td>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount6" type="radio" name="amount" value="200.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount6">$200.00 USD</label>
                                </span>
                                </td>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount7" type="radio" name="amount" value="500.00" class="form_input form_radio form_amount" />
                                    <label class="form_radio_label" for="amount7">$500.00 USD</label>
                                </span>
                                </td>
                                <td>
                                <span class="input_wrap">
                                    <input id="amount8" type="radio" name="amount" value="0.00" class="form_input form_radio form_amount" />
                                    <span class="form_radio_label"><input id="amountCustom" name="amountCustom" size="8" class="clearField" value="0.00" /></span>
                                    <label class="form_radio_label" for="amountCustom">Enter Amount</label>
                                </span>
                                </td>
                            </tr>
                        </table>
                        <label id="amountAllLabel" class="form_label" for="amount" style="display:none"></label>
                        </li>
                        <li class="clearfixit">
                            <h4>Name</h4>
                            <span class="input_wrap">
                                <input id="firstName" name="firstName" class="form_input form_text" maxlength="255" size="16"/>
                                <label class="form_label" for="FirstName">First</label>
                            </span>
                            <span class="input_wrap">
                            <input id="lastName" name= "lastName" class="form_input form_text" maxlength="255" size="16"/>
                            <label class="form_label" for="lastName">Last</label>
                            </span>
                        </li>
                        <li class="clearfixit">
                            <h4>Billing Address</h4>
                            <span class="input_wrap">
                                <input id="address1" name= "address1" class="form_input form_text" maxlength="255" size="39" value=""/>
                                <label class="form_label" for="address1">Street Adress</label>
                            </span>
                            <br clear="all" />
                            <span class="input_wrap">
                                <input id="address2" name= "address2" class="form_input form_text" maxlength="255" size="39" value=""/>
                                <label class="form_label" for="address2">Address Line 2</label>
                            </span>
                            <br clear="all" />
                            <span class="input_wrap">
                                <input id="city" name= "city" class="form_input form_text" maxlength="255" size="18" value=""/>
                                <label class="form_label" for="city">City</label>
                            </span>
                            <span class="input_wrap">
                                <select id="state" name="state" class="form_input form_text form_select">
                                    <option value="Select State" selected="selected">Select State</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                                <label class="form_label" for="state">State</label>
                            </span>
                            <br clear="all" />
                            <span class="input_wrap">
                                <input id="zip" name= "zip" class="form_input form_text" maxlength="255" size="11" value=""/>
                                <label class="form_label" for="zip">Postal / Zip Code</label>
                            </span>
                        </li>
                        <li class="clearfixit">
                            <h4>Credit Card Information</h4>
                            <span class="input_wrap">
                                <select id="creditCardType" name="creditCardType" class="form_input form_select" onChange="javascript:generateCC(); return false;"> 
                                    <option value="Visa" >Visa</option>
                                    <option value="Amex" >American Express</option>
                                    <option value="MasterCard" >MasterCard</option>
                                    <option value="Discover" >Discover</option>
                                </select>
                                <label class="form_label" for="creditCardType">Card Type</label>
                            </span>
                            <br clear="all" />
                            <span class="input_wrap">
                                <input id="creditCardNumber" name="creditCardNumber" class="form_input form_text" size="38"/>
                                <label class="form_label" for="creditCardNumber">Card Number</label>
                            </span>
                            <br clear="all" />
                            <span class="input_wrap">
                                <select id="expDateMonth" name="expDateMonth" class="form_input form_select"> 
                                    <option value="1" selected="selected">01</option>
                                    <option value="2" >02</option>
                                    <option value="3" >03</option>
                                    <option value="4" >04</option>
                                    <option value="5" >05</option>
                                    <option value="6" >06</option>
                                    <option value="7" >07</option>
                                    <option value="8" >08</option>
                                    <option value="9" >09</option>
                                    <option value="10" >10</option>
                                    <option value="11" >11</option>
                                    <option value="12" >12</option>
                                </select>
                                <label class="form_label" for="expDateMonth">Expr Date Month</label>
                            </span>
                            <span class="input_wrap">
                                <select id="expDateYear" name="expDateYear" class="form_input form_select">
                                    <option value="2011" >2011</option>
                                    <option value="2012" selected="selected">2012</option>
                                    <option value="2013" >2013</option>
                                    <option value="2014" >2014</option>
                                    <option value="2015" >2015</option>
                                    <option value="2016" >2016</option>
                                    <option value="2017" >2017</option>
                                    <option value="2018" >2018</option>
                                </select>
                                <label class="form_label" for="expDateYear">Expr Date Year</label>
                            </span>
                            <span class="input_wrap">
                                <input id="cvv2Number" name= "cvv2Number" class="form_input form_text" size="8" value="962" maxlength="4"/>
                                <label class="form_label" for="cvv2Number">Security Code</label>
                            </span>
                        </li>
                        <li class="clearfixit">
                            <span class="input_wrap">

                                <input id="submit_form" class="button_text" type="submit" name="submit" value="Submit" />
                            </span>
                        </li>
                    </ul>     

                </form>
            </div>
        </div><!-- end #content -->
        <div id="footer"></div><!-- end #footer -->
    </div><!-- end #wrapper -->
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
    $(".clearField").clearField({
        blurClass: "blurred-field",
        activeClass: "active-field"
    });


    $("#amountCustom").focus(function () {
         $("#amount8").attr('checked', true);
    });
    $("#amountCustom").blur(function(){
       $(this).val($(this).val().replace(/,/g,''));
       $(this).val(parseFloat($(this).val()).toFixed(2));

       var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/;
       var strval = $('#amountCustom').val();
        if(numberRegex.test(strval)) {
           $("#amount8").val($(this).val());
        } else {
           $('#amountCustom').val("0.00");
           $("#amount8").val("0.00");

        }       
    });

    $("#paypal_test_form").validate({
        rules: {
            amount: {
                required: true
            },
            firstName: {
                required: true,
                minlength: 2
                //defaultInvalid: true
            },
            lastName: {
                required: true,
                minlength: 2,
                //defaultInvalid: true
            },
            address1: {
                required: true,
                minlength: 4
            },
            city: {
                required: true,
                minlength: 2
            },
            state: {
                required: true,
                //defaultInvalid: true,
                minlength: 2
            },
            zip: {
                required: true,
                digits: true,
                minlength: 5,
                //defaultInvalid: true
            }
        },
        messages: {
            amount: "Please select an amount",
            firstName: {
                 required: "Please enter a first name",
                 minlength: "Please enter more charchters"
            },
            lastName: "Please enter a last name",
            address1: "Please enter a street address",
            city: "Please enter a city",
            state: "Please select a state",
            zip: "Please enter a 5 digit zip code"
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "amount" ) {
                error.insertAfter("#amountAllLabel");
            } else {
                error.appendTo(element.parent(find(".form_label")));
            }
        }
    });

    jQuery.validator.addMethod("defaultInvalid", function(value, element) {
        if (element.value == element.defaultValue) {
            return false;
        }
            return true;
    });


  });
  // Code that uses other library's $ can follow here.
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我有完全相同的问题并使用最新的jquery版本解决了它(我们应该总是这样做!)

http://code.jquery.com/jquery.min.js