Создал простую форму подписки на новостную рассылку JQuery / Ajax, а затем вернулся к факту, чтобы добавить проверку JQuery.Я не очень опытен с javascript / jquery;Я работаю над этим уже несколько дней, и у меня нет идей.
Каждый сценарий работает индивидуально.Валидатор работает правильно, если код отправки удален (хотя он будет работать нормально с указанным URL-адресом действия формы).Скрипт отправки отлично работает с удаленным кодом валидатора.Тем не менее, при наличии обоих, проверка не выполняется, и форма все еще отправляется через сценарий отправки.
Все мои попытки объединить эти два с треском провалились.
Очевидно, я пропускаючто-то довольно важное.Даже малейший толчок в правильном направлении был бы очень признателен
Вот код целиком:
<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