2009-03-16 6 views
15

以下のHTMLフォームは、空白のままにするとフォームフィールドの右側に「このフィールドは必須」と表示され、2文字未満の場合は「少なくとも2文字を入力してください」と表示され、入力された。ただし、 "cname"フォーム入力フィールドのclassおよびminlength属性を使用して検証メタデータを指定する代わりに、jQueryの "rules" APIを代わりに使用したいと考えています。この場合、ルールはvalidate関数の本体に指定されています。事前のおかげで:最も単純なJQuery検証ルールの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="/lib/js/jquery.js"></script> 
    <script src="/lib/js/jquery.validate.js"></script> 
    <script> 
    $(document).ready(function(){$("#commentForm").validate(
    /* 
    rules/messages here 
    */ 
    );} 
    ); 
    </script> 
</head> 
<body> 

<form id="commentForm" method="get" action=""> 
<fieldset> 
    <legend>A simple comment form with submit validation and default messages</legend> 
    <p> 
    <label for="cname">Name</label> 
    <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> 
    </p> 
    <p> 
    <input class="submit" type="submit" value="Submit"/> 
    </p> 
</fieldset> 
</form> 
</body> 
</html> 
+0

私はそれが非常に有用であることを発見しました – Mike

+3

この質問を閉じることは "疑わしい" –

+0

申し訳ありません申し訳ありません私の質問を再開する投票は自己実現しているようです。閉鎖された質問をするための新しい「プラチナ」バッジを取得したにもかかわらず、2013年7月時点で表示回数が12万回未満の100,000回のビューを取得した場合は、投票を取りやめる。たとえこの質問が答えをもはや得なくても、私はそれが閉じた質問であるという「悪意」を持っているとは思わない。 –

答えて

12

this blog postに含まれている例は、このトリックを行います。

+2

私はプロアクティブであり、元のリンクがなくなった場合のためにweb.archive.orgにアーカイブされた記事へのリンク:http://web.archive.org/web/20120108075037/http://www.raymondcamden.com/index.cfm/2009/ 2/10/An-Introduction-to-jQuery-and-Form-Validation-2 –

+2

このリンクのみをクリーンアップする必要があります。 – paqogomez

13
rules: { 
    cname: { 
     required: true, 
     minlength: 2 
    } 
}, 
messages: { 
    cname: { 
     required: "<li>Please enter a name.</li>", 
     minlength: "<li>Your name is not long enough.</li>" 
    } 
} 
+0

こんにちは、私はあなたの努力に感謝します。しかし、私はそれを働かせることができませんでした。私は実際に何度か前にこのようなことを試みました。それが私がここに投稿した理由です。私のサイトの1つにアップロードしたHTMLファイルの場所を示すオリジナルの質問を編集しています。 –

+1

OK、ルールブロックの最後、メッセージブロックの前、および両方のブロックの中括弧が必要です。これは単純なJavascriptのエラーを修正し、HTML-2ファイルをオンラインで更新しましたが、検証はまだ動作しません。(私は単純だと確信しています、これを過去に取得する必要があります –

1
$("#commentForm").validate({ 
    rules: { 
    cname : { required : true, minlength: 2 } 
    } 
}); 

はそのような何かであるべき、私はちょうどここエディタでこれを入力したので、構文エラーまたは2であるかもしれないが、あなたは従うことができるはずですパターンとそのdocumentation

0

マークアップで入力さ"type"が欠落している、入力(私は仮定したテキスト)は属性name="name"ID="cname"を持って、AYOによって提供されたコードは、それが「名前」である必要があり、「CNAME」という名前の入力*を呼び出します。

関連する問題