1

作業中のフォームがあり、検証JavaScript（jQueryおよびjQuery検証プラグイン）がある程度まで機能します。動作状態で表示するようにjsfiddleを設定しました：http：//jsfiddle.net/5Ukv2/

ただし、errorPlacement関数/パラメーターを使用すると壊れます。エラーは指定した場所に移動しますが、入力（つまり、キーストローク）を更新するたびに複数のエラーが追加され、JavaScriptに従ってエントリが有効な場合、エラーはHTMLから削除されません： http：/ /jsfiddle.net/5Ukv2/1/

また、入力フィールドに入力するとすぐに検証が開始されます。この問題は、余分な削除されていないエラー要素と比較して軽微です。

私は何が間違っているのですか？

jsfiddlesと同様に参照用に以下に添付されたコード。ここでは機能しないajax呼び出しを行っているため、いくつかのメソッドにコメントしましたが、検証は同じように機能します。

HTML：

<form action = "email_submit.php" method = "post" name = "enterForm" id = "enterForm">
    <labelfor = "email">再生するメールアドレスを入力してください：
    <input type = "text" name = "email" id = "email" value = "" />
    <input type = "submit" value = "Enter" name = "submit" class = "submit" />       
</ form>

JavaScript：

// JavaScript Document

$(function(){

$("#enterForm").validate({
    rules: {
        email: {
            email: true,
            required: true,
            remote: {url:"email_valid.php", async:false}
        }
    },
    messages:{
            email:{
                email: "Please enter a valid email address",
                required: "Please enter an email address",
                remote: "That is not a valid domain"
                }
    },
    submitHandler: function(form) {

        var formData = $('form').serialize();
        $.ajax({
          type: 'POST',
          url: "email_submit.php",
          data: formData,
          success: function(data){
              if(data.subscriber && data.valid_email)
                window.location = "calendar.html";
              else if( !data.valid_email)
                alert("Please enter a valid email");
              else if( !data.subscriber)
                alert("Open sign up form");
          },
          error: function(data){
              alert("e:" + data);
              console.log(data);
          },
          dataType: "JSON"
        });

        return false;
    },
    errorPlacement: function (error, element){
        if(  element.attr("name") == "email" ){
            error.insertAfter("#enterForm");
        } 
        else
            error.insertAfter(element);
    }               

    });

});
4

1 に答える 1

2

バリデータープラグインは、エラーがフォーム要素内のどこかに配置されることを期待しているようです。非表示または表示する「エラー」要素を検索するときは、検索を現在のフォームに制限している必要があります。これにより、ページに複数のフォームを含めることができ、1つのフォームでの変更が他のフォームに影響を与えることはありません。

おそらく、これはプラグインのバグである可能性があります。これが機能するフォームの変更です（fiddleを参照）

        <form action="email_submit.php" method="post" name="enterForm" id="enterForm">
            <label for="email">Enter your email to play:</label> 
            <input type="text" name="email" id="email" value=""  /> 
            <input type="submit" value="Enter" name="submit" class="submit" />             
        <div id="error_container"></div>
        </form>

</ p> 

$(function(){

    $("#enterForm").validate({
        rules: {
            email: {
                email: true,
                required: true/*,
                remote: {url:"email_valid.php", async:false}*/
            }
        },
        messages:{
                email:{
                    email: "Please enter a valid email address",
                    required: "Please enter an email address"/*,
                    remote: "That is not a valid domain"*/
                    }
        },
        submitHandler: function(form) {

            var formData = $('form').serialize();
            $.ajax({
              type: 'POST',
              url: "email_submit.php",
              data: formData,
              success: function(data){
                  if(data.subscriber && data.valid_email)
                      window.location = "calendar.html";
                  else if( !data.valid_email)
                      alert("Please enter a valid email");
                  else if( !data.subscriber)
                      alert("Open sign up form");
              },
              error: function(data){
                  alert("e:" + data);
                  console.log(data);
              },
              dataType: "JSON"
            });


            return false;
        }, //uncomment this errorPlacement method
        errorPlacement: function (error, element){
            if(  element.attr("name") == "email" ){
                error.insertAfter("#error_container");
            } 
            else
                error.insertAfter(element);
        }               


    });

});​
于 2012-11-15T01:42:57.100 に答える