0

デフォルト値が設定されているフォームがあります。これは「空のフィールド」として扱われる必要があります。私はこのテーマに関する別の投稿を見ましたが、今のところ何も機能させることができていません。それでも、フィールドが空の場合にのみエラーがスローされますが、「デフォルト値」がある場合にもエラーがスローされるはずです。

単純な単一フィールド形式のコードは次のとおりです。

<title>Untitled Document</title>
<form name="contactInfo" action="##" method="post" enctype="multipart/form-data">
<div class="step">
<div style="float:left; width:45%;">
<input type="text" name="email" value="enter your email" tabindex="1" 
onClick="this.select();" required defaultInvalid />
</div>
</div>
<input type="submit" />
</form>
<!--- form validation to handle non blank default fields --->
<script language="javascript" type="text/javascript">
$().ready(function() {
  jQuery.validator.addMethod("defaultInvalid", function(value, element) 
        {
            switch (element.value) 
            {
                case "enter your email":
                    if (element.name == "email") return false;
                    break;
                default: return true; 
                    break;
            }
        });
     // validate the comment form when it is submitted
    $("#contactInfo").validate(
    {
      rules: 
      {
       email: "required defaultInvalid"
      },
      messages: 
      {
       email: "Please input your email."
      }
    });
});
</script>

2つの問題：

  1. 空の場合にのみ検証エラーをトリガーします（デフォルト値の場合ではなく）
  2. 追加したカスタムメッセージが表示されません。

私はstackOverflowとウェブを良い時間検索しましたが、解決策を見つけることができませんでした。

4

3 に答える 3

0

これを使用して、入力のデフォルト値を取得できます

var default_value = $(this).prop("defaultValue");

そしてそれを現在の値と比較します

var current_value = $(this).val();

編集：

簡単なエラーがあります。$("#contactInfo").validate フォームに ID contactInfo がないため、その ID をフォーム タグに追加する必要があります。

<form id="contactInfo" name="contactInfo" action="##" method="post" enctype="multipart/form-data">

作業例: http://jsfiddle.net/rJVvp/

于 2013-01-30T19:55:55.620 に答える
0

すべてのエラーが修正されると、はるかにうまく機能します...

1) フォームは によってターゲティングされましidたが、あなたformには no が含まれていidました。したがって、.validate()プラグインはform.

<form name="contactInfo" id="contactInfo" ... // <- added an `id`

$("#contactInfo").validate({ ...

2）あなたのルールは少し混乱しています。これは無効です...

rules: { 
    email: "required defaultInvalid"
}

する必要があります...

rules: {
    email: {
        required: true,
        defaultInvalid: true
    }
}

3)emailフィールドは完全に混乱していました。attributesに該当するものは作成できませんrules。 

<input type="text" name="email" value="enter your email" tabindex="1" 
onClick="this.select();" required defaultInvalid />

rulesの内部を既に定義しています.validate()。それ以外の場合は、を使用してインラインで定義しますclass="required defaultInvalid"。

次のように見えるはずです...

<input type="text" name="email" value="enter your email" tabindex="1" />

何をしようとしているのかわからないonClick=ので、削除しました。jQuery を使用しているため、jQuery を使用すると、インライン JavaScript イベント ハンドラーは必要ありません。

実際のデモ: http://jsfiddle.net/PPQw8/

ドキュメントを読みます: http://docs.jquery.com/Plugins/Validation

于 2013-01-30T23:45:23.760 に答える
-1

私はカスタムロジックを持っているので、どのボタンを押すかに応じてルールを追加します。ルールを追加する前に、値を簡単に確認できます。

$('.buttonNextEmail').click(function () {
   if($(".TextBoxEmail").val() != "default string"){
        $(".TextBoxEmail").rules('add', { required: true });
        $(".TextBoxEmailVerify").rules('add', { required: true });
        $(".TextBoxEmailVerify").rules('add', {
            equalToIgnoreCase: '.TextBoxEmail'
        });
    }
});
于 2013-01-30T19:48:45.970 に答える