0
我希望將錯誤消息發佈到上面的字段上方，而不是輸入字段，而不是整個表單上的一個通用div。用ajax發佈錯誤信息
<div id="response"><!--This will hold our error messages and the response from the server. --></div>
所以我用更新response div
<form id="feedback" action="actions/email.php" enctype="multipart/form-data" method="POST">
<div id="responseName"><!-- Error for Name Field --></div>
<label class="h6">Name/Last Name</label>
<input type="text" class="form-control" id="name" name="name">
<div id="responsEmail"><!-- Error for Email Field --></div>
<label class="h6">E-mail</label>
<input type="text" class="form-control" id="email" name="email">
<div id="responsePhone"><!-- Error for Phone Field --></div>
<label class="h6">Phone</label>
<input type="text" class="form-control" id="phone" name="phone">
<div id="responseMessage"><!-- Error for Message Field --></div>
<label class="h6">Message</label>
<textarea rows="7" class="form-control" id="message" name="message"></textarea>
<button type="submit" class="btn btn-primary" name="submit" id="submit"><span class="fui-mail"></span>
<input type="hidden" name="honeypot" id="honeypot" value="http://" />
<input type="hidden" name="humancheck" id="humancheck" class="clear" value="" />
</form>
這裏的形式是當前萬畝我JS無法弄清楚如何才能得到這個工作改變。
$(document).ready(function() {
$('form #response').hide();
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
var valid = '';
var required = ' is required.';
var name = $('form #name').val();
var phone = $('form #phone').val();
var email = $('form #email').val();
var message = $('form #message').val();
// perform error checking
if (name = '' || name.length <= 2) {
valid = '<p>Your name' + required +'</p>';
}
if (!email.match(/^([a-z0-9._-][email protected][a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<p>Your email' + required +'</p>';
}
if (phone = '' || phone.length <= 7) {
valid = '<p>Your phone' + required +'</p>';
}
if (message = '' || message.length <= 5) {
valid += '<p>A message' + required + '</p>';
}
// let the user know if there are errors with the form
if (valid != '') {
$('form #response').removeClass().addClass('error')
.html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal');
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').html('Sending message...').fadeIn('normal');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
// make our ajax request to the server
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'actions/email.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout("$('form #response').fadeOut('fast')", 5000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<p>There was a<strong> ' + errorThrown +
'</strong> error due to a<strong> ' + textStatus +
'</strong> condition.</p>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
}
});
};
你檢查在開發者控制檯錯誤？ –
我寫了這個問題，並在修復後意外地將第一部分留下。是的，我意識到提交ID沒有工作，因爲我把他們都留在我的形式...我只需要弄清楚如何得到響應顯示正確 – wuno