0

ラジオボタンを検証するためにこのコードを試しました：

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript">
</script>
<script src="jquery.validate.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true,
alphanumeric:true
}
gender:"required",
},
messages:{
username:
{
required:"username cannot be empty",
alphanumeric:"username needs to be alphanumeric"
}
gender:{
required:"specify this field",
}
}
});
});


</script>
<style type="text/css">


label.error
{
color:red;
padding-left:.5em;
}
</style>

</head>
<body>
<form id="myform" action="r.html">
<table>

<tr>
<td><label for="username">Username<em>*</em>:</td></label><td><input type="text"           id="username" name="username"/></td>
</tr>

<tr>
<td><label for="gender" validate="required:true" class="required">Gender<em>*</em>:      </label></td><td><input type="radio" id="gender" name="gender" value="male"/>Male</td>
</tr>
<tr>
<td></td><td><input type="radio" id="gender" name="gender" value="female"/>Female</td>
</tr>

<tr>
<td></td>
<td><input type="submit" value="submit" id="submit"/></td>
</tr>
</table>
</form>
</body>
</html>

このコードを試したところ、性別フィールドは検証されていますが、性別と男性の属性の間にエラーメッセージが表示されています。ただし、男性の属性の0.5em後に表示する必要があります。

英数字の検証はまったく機能していません。誰かが私を助けてください。前もって感謝します。

4

1 に答える 1

0

たくさんのエラーがあります。

他の質問と同じように、これはルールの一般的な構文ではありません...

gender:"required",

required: trueそれはこのようにあなたの中にあるべきrules: {}です...

rules: {
    username: {
        required: true,
        alphanumeric: true
    },
    gender: {
        required: true
    }
},

ここにあなたのHTMLで...

<label for="gender" validate="required:true" class="required">Gender<em>*</em>:</label>

validate="required:true"完全に不要であるため、削除する必要があります。

  • 完全に作り上げられているので意味がありませんattribute。
  • labelの代わりに適用されinputます。

class="required"label要素ではなくに適用されるため不要であるだけでなく、オプションinput内でルールをすでに指定しているため、完全に冗長です。.validate()

jQueryで定義されたルールを使用すると、HTMLは単純に次のようになります。

<label for="gender">Gender<em>*</em>:</label>

ルールを使用するには、ここに「追加のメソッド」ファイルalphanumericも含める必要があります。

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js

または縮小：

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js

ここに無効なHTMLがあります。...</label>の外側をどのようにラップするかに注意してください。</td>

<td><label for="username">Username<em>*</em>:</td></label>

する必要があります：

<td>
    <label for="username">Username<em>*</em>:</label>
</td>

エラーを配置する限り、私はそもそもtableフォームをレイアウトするためにを使用しなかったでしょう。errorPlacement:とはいえ、組み込みのメソッド を使用してエラーメッセージを配置することもできます。error.insertAfter(element)デフォルトの関数です。

条件を使用してのタイプをテストするinputと、ラジオボタンのこの関数を変更できます。以下のコードを微調整して、必要に応じてメッセージを配置できます。

jQuery.validate()メソッド：

$("#myform").validate({

    // your rules and options,

    errorPlacement: function (error, element) {
        if (element.is('input[type="text"]')) {
            error.insertAfter(element); // placement of errors on text fields
        } else if (element.is('input[type="radio"]')) {
            element.next('.radio-message').html(error);  // placement of errors on radio buttons
        } else {
            error.insertAfter(element);  // default placement
        }
    }
});

HTML：

<input type="radio" id="gender" name="gender" value="male" />Male <span class="radio-message"></span>

作業デモ：

http://jsfiddle.net/kP4Xy/

また、コンマが欠落していて（コードが壊れます）、余分なコンマがいくつかありました（IEのコードが壊れている可能性があります）。

繰り返しになりますが、前に述べたように、適切なコードのインデントとフォーマットに従うと、これらの間違いを見つけやすくなります。 今回は私のアドバイスを強くお勧めします。あなたはより優れたプログラマーになり、コードは読みやすくなり、HTMLはより有効になり、JavaScriptはトラブルシューティングが容易になります。

プラグインのドキュメント：

http://docs.jquery.com/Plugins/Validation

于 2013-01-06T16:39:11.617 に答える