3
私自身の検証を書くのではなく、代わりにJQueryを使うと思っていましたが、これも簡単ではありません。私は誰かが答えることを願っているいくつかの質問があります。まず、エラーメッセージはsubmitをクリックすると表示されます。各フィールドを終了した後、それらを表示させるにはどうすればよいですか？検証のための私のコードはここにあります。JQueryとvalidateプラグイン
コード：
$(document).ready(function(){
$("#orderForm").validate({
rules: {
shipFirstName: {
required: true,
},
shipFamilyName: {
required: true,
},
shipPhoneNumber: {
required: true,
},
shipStreetName: {
required: true,
},
shipCity: {
required: true,
},
billEmailAddress: {
required: true,
},
billPhoneNumber: {
required: true,
},
billCardNumber: {
required: true,
},
billCardType: {
required: true,
},
}, //end of rules
}); // end of validate
}); //end of function
これは、フォームのための私のHTMLコードです。私はスタイリングを表示しませんが、赤いフォントを表示するように変更しました。
コード：
<form id="orderForm" method="post" action="x">
<table id="formTable" cellpadding="5">
<tr>
<td>
<h3>Shipping and Billing Information</h3>
</td>
<td> </td>
</tr>
<tr>
<td><label for="shipFirstname">First Name</label></td>
<td><input id="shipFirstName" type="text" name="shipFirstName" maxlength=
"30" /></td>
</tr>
<tr>
<td><label for="shipFamilyName">Surname</label></td>
<td><input id="shipFamilyName" type="text" name="shipFamilyName" maxlength="30" /></td>
</tr>
<tr>
<td><label for="shipPhoneNumber">Contact Telephone Number</label></td>
<td><input id="shipPhoneNumber" type="text" name="shipPhoneNumber" maxlength="30" /></td>
</tr>
<tr>
<td><label for="shipStreetName">Street Name</label></td>
<td><input id="shipStreetName" type="text" name="shipStreetName" maxlength="30" /></td>
</tr>
<tr>
<td><label for="shipCity">City</label></td>
<td><input id="shipCity" type="text" name="shipCity" maxlength="30" /></td>
</tr>
<tr>
<td><label for="shipPostalCode">Postal Code</label></td>
<td><input id="shipPostalCode" type="text" name="shipPostalCode" maxlength="30" /></td>
</tr>
<tr>
<td><label for="billEmailAddress">Email address</label></td>
<td><input id="billEmailAddress" type="text" name="billEmailAddress" maxlength="30" /></td>
</tr>
<tr>
<td><label for="billPhoneNumber">Contact Telephone Number</label></td>
<td><input id="billPhoneNumber" type="text" name="billPhoneNumber" maxlength="30" /></td>
</tr>
<tr>
<td><label for="fidelityCardNumber">Fidelity card</label></td>
<td><input id="fidelityCardNumber" type="text" name="fidelityCardNumber" maxlength="30" /></td>
</tr>
<tr>
<td><label for="billCardNumber">Credit Card Number</label></td>
<td><input id="billCardNumber" type="text" name="billCardNumber" maxlength="30" /></td>
</tr>
<tr>
<td><label for="billCardType">Credit Card Type</label></td>
<td><select id="billCardType" name="billCardType">
<option value="...">
Choose your card...
</option>
<option value="visa">
Visa
</option>
<option value="mastercard">
Mastercard
</option>
</select></td>
</tr>
<tr>
<td><label for="instructions">Instructions</label></td>
<td>
<textarea id="instructions" name="instructions" rows="8" cols="30">
Enter your requirements here or comments.
</textarea></td>
</tr>
<tr>
<td colspan="2"><input id="submit" type="submit" name="Submit" value="Submit" </td>
</tr>
</table>
</form>
私はまた、郵便番号や忠実カードのregexsを使用したいです。これらをスクリプトに組み込むにはどうすればよいですか？これは正しいですか？どこに置くの？
$.validator.addMethod('shipPostalCode', function (value) {
return /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
}, 'Please enter a valid Postal Code');
$.validator.addMethod('fidelityCardNumber', function (value) {
return /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}(\!|\&|\@|\?){1}$/.test(value);
}, 'Please enter a valid card number');
最終的なものです。このスクリプトを外部のjsファイルに簡単に入れることはできますか？私はできるだけ多くのHTMLファイルを取得しようとしています。
おかげ
はい、あなたは簡単に静かに外部のjsファイルに追加することができます。それを動作させるためのもので、jqueryでフォームの検証を試していません。ドキュメントを調べるだけで、フォームフィールドにはonfocusoutを、チェックボックスとラジオボタンにはonclickを使うことができます。申し訳ありませんが私はより多くの助けになることができます – Aduljr
私はフィールドからクリックすると表示されないエラーメッセージに関する問題を整理することができました。私はこのコードを使用する： $を（ "..."）（{onfocusout ：機能（要素）{ this.element（エレメント）;} を}）検証します。 私はまだ正規表現でカスタムメソッドに固執しています –