양식 유효성 확인 - 최소 숫자 값

Question

누군가 5의 숫자 입력을 제한하는 유효성 확인 양식에 대한 조언을 제공 할 수 있습니까? 기부 양식, 단순히 금액 입력란 및 페이팔 제출 버튼이 있습니다.

금액 값이 5 미만인 경우 양식 유효성 검사를 위해 어떤 형식 확인을 사용해야합니까 (5.00 파운드).

양식

은 다음과 같습니다 :

<form target="paypal" id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" > 
    <div class="span6 text-center"> 
      <input type="hidden" name="cmd" value="_cart"> 
      <input type="hidden" name="business" value="SECRET-ID"> 
      <input type="hidden" name="lc" value="GB"> 
      <input type="hidden" name="item_name" value="General"> 
      <input type="hidden" name="item_number" value="GEN"> 
     <div class="input-prepend input-append"> 
      <span class="add-on">£</span> 
      <input class="span12" name="amount" value="5" placeholder="Enter Donation Amount" id="appendedPrependedInput" size="20" type="text"> 
      <input type="hidden" name="currency_code" value="GBP"> 
      <input type="hidden" name="button_subtype" value="products"> 
      <input type="hidden" name="no_note" value="0"> 
      <input type="hidden" name="cn" value="Add special instructions to the seller:"> 
      <input type="hidden" name="no_shipping" value="2"> 
      <input type="hidden" name="add" value="1"> 
      <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest"> 
     </div> 
    </div> 
    <div class="span6 text-center"> 
     <div class="controls"> 


    <a id="buynow" class="btn btn-danger" href="#" rel="nofollow" onclick="document.getElementById('donate').submit(); return false;"> 
     <span style="">Donate via PayPal!</span></a> 
    <noscript> 
     <style>#buynow { display: none; } #page_theme #donate input { display: inline; }</style> 
     <input type="submit" class="btn btn-danger" value="Donate via PayPal!"> 
    </noscript>    
     </div> 
    </div> 
    <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">   
</form> 

Answer 1

을 사용 :

<form target="paypal" id="donate" action="https://www.paypal.com/cgi-bin/webscr" data-validate="parsley" method="post" > 

을 그리고 귀하의 의견은 다음과 같은 데이터 속성을 추가하기위한 (더 검증 RU의 설명서를 읽어

data-validate="parsley" 

은 다음과 같아야합니다 레) :

data-min="6" 

은 그래서 같이한다 :

<input class="span12" name="amount" value="5" placeholder="Enter Donation Amount" data-min="6" id="appendedPrependedInput" size="20" type="text"> 

그리고 바로 그거야. 당신이 통과 첨부 기능에서

<input type="text" name="amount" onblur="checkValue(this)" /> 

: 당신은 아주 간단한 프론트 엔드 솔루션을 원하는 경우

Answer 2

그들 중 많은이있다, 그러나 대부분의 사람들이 이미 jQuery를 사용하고 그들이 클라이언트 측 유효성 검사를 사용하고자하기 때문에, 나는 Jquery Validation를 사용합니다. 백엔드를 기억하십시오. PHP, C# 또는 필요한 모든 유효성 검사를 사용해야합니다. 당신이 jQuery를 사용하지 않는 경우, 나는 parsley.js이

그래서 양식에 파슬리를 사용하는 것은 (당신이 그것을 설치 한 후), 양식이 데이터 속성을 추가 사용하는 것이 귀하의 경우에는 this

Answer 3

, 당신은 입력 값을 테스트하기 위해 입력 요소에 대한 위해 onblur 이벤트에 부착 된 자바 스크립트 기능을 사용할 수 있습니다 해당 요소의 값을 확인하십시오.

function checkValue(element){ 
    if(element.value < 5){ 
     alert('The minimum donation is 5.00!'); 
     // clear value, display message, etc. 
    } 
} 

이 기능은 커서가 입력 필드를 떠날 때마다 트리거됩니다. 간단한 경고만으로도 충분할 수 있습니다. 요소 입력이 실제로 문자열이 아닌 숫자인지 확인하기 위해 추가 검사를 추가 할 수도 있습니다. 최종 사용자가 양식 사용 방법을 모를 것이라고 가정하는 것이 가장 좋습니다.

이것은 프런트 엔드 솔루션 일 뿐이며 제출 된 모든 양식은 선택한 서버 측 언어 (예 : PHP)에서 유효성을 검사해야합니다. 데이터를 저장할 때이 Javascript 유효성 검사를 신뢰할 수있는 유효성 검사기로 받아 들여서는 안됩니다.