Хорошо, я использовал 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>