У меня проблемы с созданием кода, который должен отображать кнопку только в том случае, если все текстовые поля проверены правильно. Я скрываю кнопку, когда открывается страница (я знаю, что могу использовать css для этого, но я просто пытаюсь проработать функциональность), и я хочу показать кнопку, когда поля верны. Я пытаюсь использовать параметр успеха, но он просто показывает кнопку непосредственно перед тем, как что-либо заполнено. Какие-либо предложения? Вот код:
<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>