chuuke
Reputation: 606
jQuery Validate - Immediate Error Removal Not Working
Alright, I have used jQuery Validate a ton of times, but have never had this problem... I have a simple form with inputs and and some radio buttons. Everything works fine, it displays the errors for the fields that aren't valid, but what is NOT working is the LIVE removal of the error once it is valid. It disappears immediately for the radio selection, but for NONE of the other fields.
I've always had it where it removes once the field is valid. Can someone tell me what I'm doing wrong? I've tried altering just about everything and I'm completely stumped.
Any help is greatly appreciated!
Code below:
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>
Upvotes: 0
Views: 626
Answers (1)
user1107980
Reputation: 11
I had the exact same problem and solved it by using the latest jquery version (which we should always do!)
http://code.jquery.com/jquery.min.js
Upvotes: 1
Related Questions
- how to clear error when using jquery validate and custom errorPlacement
- JQuery Validation: errorPlacement doesn't get called
- jQuery validator errorplacement
- JQuery validation does not update error element for a next error if "errorPlacement" 's been modified.
- jQuery validation errorPlacement - can't remove error once corrected
- jQuery validate errorPlacement removal
- jquery validation errorPlacement not working
- jquery validation errorPlacement trouble
- Problem With errorPlacement in jQuery Validator
- jQuery: Validation errorPlacement