JQueryフォームの検証とスクリプトの競合が発生しました

単純なJQuery/Ajaxニュースレターのサインアップフォームを作成した後、JQuery検証を追加するという事実の後に戻りました。私はjavascript/jqueryにはあまり経験がありません。これを数日間はやっていて、アイデアがないからです。JQueryフォームの検証とスクリプトの競合が発生しました

各スクリプトは個別に動作します。バリデータは、送信コードが削除されていれば正常に動作します（ただし、指定されたフォームアクションURLで正常に動作します）。送信スクリプトは、バリデーターコードが削除された状態で完全に動作します。しかし、両方の場所で、妥当性検査は行われず、依頼書は依然として提出スクリプトから提出されます。

2人を統合しようとする私の試みはすべて悲惨に失敗しました。

明らかに私はかなり大事なものを欠いています。右方向に少しでもナッジは非常

をいただければ幸いここでのコードは、その全体があります：

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 


<!-- form validator --> 
<script> 
$(document).ready(function(){ 
// run validator, specifies name of css div that will be displayed 
// on error and hide when corrected 
$("#nl").validate({ 
errorContainer: "#errorcontainer", 
}); 
}); 
</script> 


<!-- form submit --> 
<script> 
$(function() { 
// These first three lines of code compensate for Javascript being turned on and off. 
// It changes the submit input field from a type of "submit" to a type of "button". 

var paraTag = $('input#submit').parent('b'); 
$(paraTag).children('input').remove(); 
$(paraTag).append('<input type="button" name="submit" id="submit" value="Submit" />'); 

$('input#submit').click(function() { 

    $("#response").css("display", "none"); 
    $("#loading").css("display", "block"); 

    $.ajax({ 
     type: 'GET', 
     url: 'http://app.icontact.com/icp/signup.php', 
     data: $("form").serialize(), 
     complete: function(results) { 
    setTimeout(function() { 

    $("#loading").css("display", "none"); 
    $("#response").css("display", "block"); 
    }, 1500); 
     } 
    }); // end ajax 
}); 
}); 
</script> 



<style type="text/css"> 
<!-- 
#errorcontainer { 
display: none; 
} 
#response { 
display: none; 
} 
--> 
</style> 
</head> 
<body> 
<div id="newsletter"> 
<form id="nl" method="post" action=""> 
<div id="heading">Sign up for the NCMP newsletter </div> 
<div> 
    <input name="fields_fname" type="text" id="fields_fname" class="required" value="First Name" size="25" /> 
</div> 
<div> 
    <input name="fields_email" class="example-default-value" type="text" id="fields_email" value="Email address" /> 
</div> 
<b> 
    <input type="submit" name="submit" id="submit" value="Submit" /> 
</b> 
<div id="response">from submit script - shows on success</div> 
<div id="loading"></div> 
</form> 
</div> 
<div id="errorcontainer">from validator script - shows on error</div> 
</body> 
</html>

おかげで、 -Bob

出典

2011-07-31 Bob S.

それはclickのように見えますが、検証のjQueryによって防止されていません。意味あり;プラグインがおそらくsubmitイベントをタップしていると確信しています。

jQuery validateを使用する場合、AJAX機能を統合するための最良の方法は、おそらくsubmitHandlerコールバックにあることでしょう。

$("#nl").validate({ 
    errorContainer: "#errorcontainer", 
    submitHandler: function() { 
     $("#response").css("display", "none"); 
     $("#loading").css("display", "block"); 

     $.ajax({ 
      type: 'GET', 
      url: 'http://app.icontact.com/icp/signup.php', 
      data: $("form").serialize(), 
      complete: function(results) { 
       setTimeout(function() { 
        $("#loading").css("display", "none"); 
        $("#response").css("display", "block"); 
       }, 1500); 
      } 
     }); 
    } 
});

submitHandlerコールバックのコードは（バニラHTTPリクエストを行うことです）フォーム送信のデフォルトのアクションを置き換えます。だから、単に周りにいくつかのコードを動かすの問題でなければなりません。

出典

2011-07-31 02:05:23

まあ...私はいくつかの森を持っている。これはチャンピオンのように働きました、ありがとう –

@Bob：もし問題があれば答えを受け入れることを忘れないでください： '） –

JQueryフォームの検証とスクリプトの競合が発生しました

答えて

関連する問題