довести его до такой степени: моя функция ничего не говорит мне, когда я отправляю форму. URL изменяется, но похоже, что функция не запускается. Пожалуйста помоги!
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
});
});
</script>
Заранее спасибо!
PS: Искал его уже в google, но не нашел хорошего результата.
Используй это:
$('form[name="contact"]').on('submit', function() {
$('.error').hide();
var name = $("input#name").val();
if (name.length == 0) {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email.length == 0) {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone.length == 0) {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
return true;
});
Сначала добавьте параметр события в обработчик нажатия кнопки, например:
$(".button").click(function(e)){
Затем также измените
return false;
к
e.preventDefault();
РЕДАКТИРОВАТЬ:
Этот код работает для меня. Когда вы нажимаете кнопку с пустыми полями, форма не отправляется и отображается текст ошибки рядом с первым полем. Кстати, здесь нет php, просто html и jquery. Вы загружаете jquery на свою страницу?
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function(e) {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
e.preventDefault();
return;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
e.preventDefault();
return;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
e.preventDefault();
return;
}
});
});
</script>
onSubmit
? Просто используйте$('form[name="contact"]').on('submit', function() { ....