シンプルフォームの検証

Question

POST＃1

この単純なフォーム（空のフィールド文字列を確認）を検証するにはどうすればよいですか？

   <p>Please select your Gift Certificate amount below. Please also enter your name and the Gift Certificate recipient's name. Once you click 'Buy Now' you will be sent to our Paypal site to complete the purchase.</p> 

        <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
     <input type="hidden" name="cmd" value="_s-xclick"> 
     <input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf"> 
     <table width="100%"> 
     <tr> 
      <td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td> 
      <td><select name="os0"> 
      <option value="Option 1">$20.00</option> 
      <option value="Option 2">$50.00</option> 
      <option value="Option 3">$100.00</option> 
      </select></td> 
     </tr> 
     <tr> 
      <td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td> 
      <td><input type="text" name="os1" maxlength="60" size="30"></td> 
     </tr> 
     <tr> 
      <td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td> 
      <td><input type="text" name="os2" maxlength="60" size="30"></td> 
     </tr> 
     </table> 

     <table width="100%" style="margin-top: 10px;"> 
      <tr> 
       <td><input type="hidden" name="currency_code" value="CAD"> 
     <p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p> 
     <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td> 
       <td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td> 
      </tr> 
     </table> 
     </form> 

POST＃2

関数validate_form（）{ 真=有効。

if (document.GiftForm.os1.value == "") 
    { 
     alert ("Please fill in the 'Your Name' box."); 
     valid = false; 
    } 
    return valid; 
} 

- = - = - = - =フォーム

 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" method="GiftForm" onsubmit="validate_form()"> 
     <input type="hidden" name="cmd" value="_s-xclick"> 
     <input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf"> 
     <table width="100%"> 
     <tr> 
      <td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td> 
      <td><select name="os0"> 
      <option value="Option 1">$20.00</option> 
      <option value="Option 2">$50.00</option> 
      <option value="Option 3">$100.00</option> 
      </select></td> 
     </tr> 
     <tr> 
      <td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td> 
      <td><input type="text" name="os1" maxlength="60" size="30"></td> 
     </tr> 
     <tr> 
      <td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td> 
      <td><input type="text" name="os2" maxlength="60" size="30"></td> 
     </tr> 
     </table> 

     <table width="100%" style="margin-top: 10px;"> 
      <tr> 
       <td><input type="hidden" name="currency_code" value="CAD"> 
     <p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p> 
     <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td> 
       <td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td> 
      </tr> 
     </table> 
     </form> 

Answer 1

jQueryのオプションですか？本当に素敵な検証ツールhttp://docs.jquery.com/Plugins/Validation

Answer 2

が

<script type="text/javascript"> 
    function validate_form () 
    { 
     valid = true; 

     if (document.GiftForm.os1.value == "") 
     { 
      alert ("Please fill in the 'Your Name' box."); 
      valid = false; 
     } 

     return valid; 
    } 
</script> 

Answer 3

あなたのフォームあなたが行くを取得する必要がありますヒントのカップル（GiftForm）に名前を付けあります。

は提出イベントハンドラを追加します。

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return validate()"> 

は、あなたが取得したい入力フィールドにIDを与えます。あなたが提出したくない場合は

<input id="currency_code" type="hidden" name="currency_code" value="CAD"> 

は、検証コード、return falseを書きます。

<script type="text/javascript"> 

    function validate() { 

     var currencyCode = document.getElementById("currency_code"); 

     var ok = currencyCode.value !== ''; 

     return ok; 

    } 

</script> 

Answer 4

ここでは簡単なチュートリアルとデモとソースコードを紹介します。 http://gonga.in/simple-javascript-form-validation/