3
すべてのテキストフィールドが正しく検証された場合にのみ、ボタンを表示するコードを作成する際に問題が発生します。私はページが開くときにボタンを隠しています（これを行うにはCSSを使うことができますが、機能を試してみることです）、フィールドが正しいときにボタンを表示したいと思います。私は成功のオプションを使用しようとしていますが、何かが記入される直前にボタンを表示しています。助言がありますか？jqueryでエラーがないか確認する方法.validate（）
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js\jquery.validate.js"></script>
<script>
$(document).ready(function(){
var submit = false;
$(".btn").hide();
$("#submission").validate({
rules: {
appSize: {
required:true,
max:12 },
appName: {
required:true,
rangelength:[4,9] },
appPrice: {
required:true,
min:.99,
max:3.99 },
email: {
required:true,
email:true }
},
messages: {
appSize: {
required: "App Size is a required field"},
appName: {
required: "App Name is a required field",
rangelength: "The name must be between 4 and 9 characters" },
appPrice: {
required: "App Price is a required field",
min: "Price must be .99 or greater",
max: "Price must be less than 3.99" },
email: {
required: "email is a required field",
email: "You must enter a valid email address" },
success: submit = true
},
errorElement: "div",
});
if(submit)
$(".btn").show();
$(".btn").click(function() {
alert("Data is Valid, Thanks for your submission");
});
});
</script>
</head>
<body>
<form id="submission" method="post" action="#">
<h1>Apple iPhone App Contest Submission Page</h1>
<div id="theForm">
<div>
<label for="appSize">What is the file size in KB?</label>
<input name="appSize" type="text" id="fileSize" class="required error"></input>
</div>
<br />
<div>
<label for="appName">What is the App Name?</label>
<input name="appName" type="text" id="appName" class="required error"></input>
</div>
<br />
<div>
<label for="appPrice">What is the App Price? $</label>
<input name="appPrice" type="text" id="appPrice" class="required error"></input>
</div>
<br />
<div>
<label for="email">Submitters Email Address</label>
<input name="email" type="text" id="email" class="required error"></input>
</div>
<br />
<input type="button" class="btn" value="Submit"></input>
</div>
</form>
</body>
</html>
私は完全にそれを行う方法がわかりません...これは私がjquery検証プラグインを使用した初めてです。 –