1. 首页
  2. 问答
  3. jQuery验证 - 立即清除错误无法正常工作

jQuery验证 - 立即清除错误无法正常工作

2011-11-08 43 views
0

好吧，我已经使用jQuery验证了很多次，但从未有过这个问题......我有一个简单的输入和单选按钮。一切工作正常，它显示错误的字段是无效的，但什么是不工作是一旦有效的错误实时删除。它会立即消失，用于无线电选择，但对于其他领域的NONE。jQuery验证 - 立即清除错误无法正常工作

我一直有它一旦领域是有效的它删除。有人能告诉我我做错了什么吗？我试过改变一切，我完全陷入困境。

任何帮助，非常感谢！下面

代码：

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>

来源

2011-11-08 chuuke

+3

你可以只发布相关的来源？它会觉得像第二份工作，通读所有的HTML/JS ... –

+0

当然，这里是源zip文件：http://filmdemic.com/apps/paypaltest/stackOverflowSource.zip，这里是它的生活： http://filmdemic.com/apps/paypaltest/stackOverflowSource/ – chuuke

+0

我已经发现minlength不适用于选择框，因为它是根据选择的数量而不是选择值的长度。我从状态中删除了minlength，并且创建了第一个选项value =“”，一旦选择状态，它确实会删除错误，但是没有一个文本输入错误会立即消失......任何人都知道为什么？ – chuuke

回答

相关问题

 相关问题