-3

お問い合わせフォームがあります。名前を聞かれた後、電話かメールのどちらで連絡を取りたいか尋ねられます。ユーザーが電話または電子メールのラジオ ボタンを選択しない限り、電話および電子メール フィールドは非表示になります。電話または電子メールのいずれかをクリックすると、入力された電話または電子メール アドレスが正しいかどうかを検証します。

私の質問は、ユーザーがどちらのラジオ ボタンもクリックしていない場合に、JQuery Validation で確認してエラー メッセージを出力する方法です。

4

3 に答える 3

1

一連のラジオ ボタンを検証する方法を尋ねているだけですか? radio inputコードを表示していないので、プラグインを使用して のセットを検証する方法をお見せできます。

次に、組み込みrulesメソッドを使用して、対応する入力からルールを動的に追加/削除します。繰り返しますが、ソリューションをカスタマイズする前に、コードを確認する必要があります。

ワーキングデモ：http://jsfiddle.net/PbHwX/

jQuery :

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            radiotest: {
                required: true
            }
        },
        messages: {
            radiotest: {
                required: "please select at least one option"
            }
        }
    });

});

HTML :

<input type="radio" name="radiotest" value="0" />
<input type="radio" name="radiotest" value="1" />

ドキュメント: http://docs.jquery.com/Plugins/Validation

于 2013-01-20T17:42:03.737 に答える
0

更新 (2012-01-20 19:38) : 私はあなたが探していたものを理解し、jQuery の Validation プラグインを使用したいと思っていることに気付いたと思います。

これはJSFiddleで動作するデモです（注：Sparkyのフィドルから分岐しました）

デフォルトでは、ラジオボタンに関するルールのみが設定されています。すべてのメッセージは事前に設定されており、フォームの特定のフィールドは非表示になっています。ラジオ ボタンがクリックされるたびに、不要なフィールドを非表示にし、対応するルールを削除します。右側のフィールドも表示し、対応するルールを追加します。

探していた特定のコードは、次のようなものである必要があります。

    /* Toggle fields */
    $('#mailfields').hide();
    $('#phonefields').show();

    /* Remove email rule */
    $('input:text[name=emailadress]').rules('remove');

    /* Add a requirement rule for phone */
    $('input:text[name=phonenumber]').rules('add', { required: true });

最初の回答:ユーザーが 2 つのラジオ (電子メールまたは電話) のいずれかを選択すると、対応するフィールドのいずれかが表示されると言います。したがって、ユーザーが 1 つのラジオ ボタンをクリックするたびに実行される jQuery コードが既にあると仮定します。

このコードは、クラスまたは非表示フィールドまたは好みのものを追加できます (または、この場合の最も一般的な方法は何でも、残念ながら私はそれを知るのに十分な経験がありません...)、ユーザーが選択したことを後で知ることができますオプション。

もっと多くのコード (たとえばjsFiddle ) を示すことができれば、より具体的な回答を提供できます。それでも、ここに私がすることがあります：

  1. フォームのすべてのフィールドが既に HTML ドキュメントにある
  2. jQueryとCSSで好きなようにフィールドを非表示/表示

  3. テストは常に同じです。

    (phoneRadio.selected && phoneField.filled)
|| (mailRadio.selected && mailField.filled)

それがどのように役立つか教えてください。

于 2013-01-20T17:28:42.413 に答える
-1

多くのフォームがあり、ASP.NET MVCなどを使用している場合は、jqueryを控えめに使用できます。または、次のような操作を実行できます。

デモ

$('#form').click(function (e) { // or $form.submit handler
    if ($('#email').val() == "") // or you can use an regex validation
    {
       e.preventDefault();
        // set message here
        $('#message').css('color', 'red').append('email invalid !');
    }
});

$('form').submit(function (e) {
    alert('submited :' + $('#email').val());
});
于 2013-01-20T17:43:24.003 に答える