Fatal编程技术网
  • javascript/
  • Javascript 使用ajax发布错误消息

Javascript 使用ajax发布错误消息

javascript php jquery html css

Javascript 使用ajax发布错误消息,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我希望将错误消息发布到输入字段上方的字段，而不是整个表单上方的一个通用div <div id="response"><!--This will hold our error messages and the response from the server. --></div> 这里是mu currentJS，我不知道要想让它正常工作，需要做什么改变 $(document).ready(function() { $('form #respon

我希望将错误消息发布到输入字段上方的字段，而不是整个表单上方的一个通用div

 <div id="response"><!--This will hold our error messages and the response from the server. --></div>
这里是mu current
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._-]+@[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();
        }
    }); 
};

$（文档）.ready（函数（）{
$（'form#response'）.hide（）；
$（“#提交”）。单击（函数（e）{
//阻止窗体默认操作，直到
//已执行错误检查
e、 预防默认值（）；
//获取表单字段值
var有效=“”；
var required='是必需的'；
var name=$（'form#name'）.val（）；
var phone=$（'form#phone'）.val（）；
var email=$（'form#email'）.val（）；
var message=$（'form#message'）.val（）；
//执行错误检查
如果（name=“”| | name.length尝试更改


<button type="submit" class="btn btn-primary"  name="submit" id="submit"> 






到





或


我在提交中添加了一些代码，以在字段上方显示错误


$('#submit').click(function(e) {

    // prevent forms default action until
    // error check has been performed
    e.preventDefault();
    $('#responseName').html('');
    $('#responsePhone').html('');
    $('#responseEmail').html('');
    $('#responseMessage').html('');

    // grab form field values
    var fieldErrors =  false;
    var nameError = false;
    var phoneError = false;
    var emaiError = false;
    var messageError = false;
    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) {
        fieldErrors = true;
        nameError = true;
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        fieldErrors = true;
        emailError = true;
    }

    if (phone = '' || phone.length  <= 7) {
        fieldErrors = true;
        phoneError = true;
    }

    if (message = '' || message.length <= 5) {
        fieldErrors = true;
        messageError = true;

    }

    // let the user know if there are errors with the form
    if (fieldErrors) {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal');

        if (nameError) {
          $('#responseName').append('<p>Your name' + required +'</p>');       
        }         
        if (phoneError) {
          $('#responsePhone').append('<p>Your phone' + required +'</p>');       
        }         
        if (emailError) {
          $('#responseEmail').append('<p>Your email' + required +'</p>');       
        }         
        if (messageError) {
          $('#responseMessage').append('<p>A message' + required +'</p>');       
        }         

    }
    // 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);           
    }           

});



$（“#提交”）。单击（函数（e）{
//阻止窗体默认操作，直到
//已执行错误检查
e、 预防默认值（）；
$（'#responseName'）.html（''）；
$（'#responsePhone'）.html（''）；
$（'#responseEmail'）.html（''）；
$（'#responseMessage'）.html（''）；
//获取表单字段值
var fieldErrors=false；
var namererror=false；
var phoneError=false；
var emaiError=false；
var messageError=false；
var required='是必需的'；
var name=$（'form#name'）.val（）；
var phone=$（'form#phone'）.val（）；
var email=$（'form#email'）.val（）；
var message=$（'form#message'）.val（）；
//执行错误检查

如果（name=“”| | name.length@Niya的答案是正确的，但有几个输入错误/错误。请注意，
name=“”
是一个赋值，而不是一个相等检查。这里的工作代码

HTML


<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="responseEmail"><!-- 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">Submit</button>
    <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>




姓名
电子邮件
电话
消息
提交


Javascript


$('#submit').click(function(e) {

    // prevent forms default action until
    // error check has been performed
    e.preventDefault();
    $('#responseName').html('');
    $('#responsePhone').html('');
    $('#responseEmail').html('');
    $('#responseMessage').html('');

    // grab form field values
    var fieldErrors =  false;
    var nameError = false;
    var phoneError = false;
    var emailError = false;
    var messageError = false;
    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) {
        fieldErrors = true;
        nameError = true;
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        fieldErrors = true;
        emailError = true;
    }

    if (phone == '' || phone.length  <= 7) {
        fieldErrors = true;
        phoneError = true;
    }

    if (message == '' || message.length <= 5) {
        fieldErrors = true;
        messageError = true;

    }

    // let the user know if there are errors with the form
    if (fieldErrors) {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>').fadeIn('normal');

        if (nameError) {
          $('#responseName').append('<p>Your name' + required +'</p>');       
        }         
        if (phoneError) {
          $('#responsePhone').append('<p>Your phone' + required +'</p>');       
        }         
        if (emailError) {
          $('#responseEmail').append('<p>Your email' + required +'</p>');       
        }         
        if (messageError) {
          $('#responseMessage').append('<p>A message' + required +'</p>');       
        }         

    }
    // 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);           
    }           

});



$（“#提交”）。单击（函数（e）{
//阻止窗体默认操作，直到
//已执行错误检查
e、 预防默认值（）；
$（'#responseName'）.html（''）；
$（'#responsePhone'）.html（''）；
$（'#responseEmail'）.html（''）；
$（'#responseMessage'）.html（''）；
//获取表单字段值
var fieldErrors=false；
var namererror=false；
var phoneError=false；
var-emailError=false；
var messageError=false；
var required='是必需的'；
var name=$（'form#name'）.val（）；
var phone=$（'form#phone'）.val（）；
var email=$（'form#email'）.val（）；
var message=$（'form#message'）.val（）；
//执行错误检查

如果（name=''| | | name.length）您检查过开发人员控制台中的错误了吗？我写下了这个问题，并在第一部分修复后意外地保留了它。是的，我意识到提交id不起作用，因为我将它们都保留在我的表单中…我只需要找出如何使响应看起来正确

$('#submit').click(function(e) {

    // prevent forms default action until
    // error check has been performed
    e.preventDefault();
    $('#responseName').html('');
    $('#responsePhone').html('');
    $('#responseEmail').html('');
    $('#responseMessage').html('');

    // grab form field values
    var fieldErrors =  false;
    var nameError = false;
    var phoneError = false;
    var emaiError = false;
    var messageError = false;
    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) {
        fieldErrors = true;
        nameError = true;
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        fieldErrors = true;
        emailError = true;
    }

    if (phone = '' || phone.length  <= 7) {
        fieldErrors = true;
        phoneError = true;
    }

    if (message = '' || message.length <= 5) {
        fieldErrors = true;
        messageError = true;

    }

    // let the user know if there are errors with the form
    if (fieldErrors) {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal');

        if (nameError) {
          $('#responseName').append('<p>Your name' + required +'</p>');       
        }         
        if (phoneError) {
          $('#responsePhone').append('<p>Your phone' + required +'</p>');       
        }         
        if (emailError) {
          $('#responseEmail').append('<p>Your email' + required +'</p>');       
        }         
        if (messageError) {
          $('#responseMessage').append('<p>A message' + required +'</p>');       
        }         

    }
    // 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);           
    }           

});



<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="responseEmail"><!-- 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">Submit</button>
    <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>



$('#submit').click(function(e) {

    // prevent forms default action until
    // error check has been performed
    e.preventDefault();
    $('#responseName').html('');
    $('#responsePhone').html('');
    $('#responseEmail').html('');
    $('#responseMessage').html('');

    // grab form field values
    var fieldErrors =  false;
    var nameError = false;
    var phoneError = false;
    var emailError = false;
    var messageError = false;
    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) {
        fieldErrors = true;
        nameError = true;
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        fieldErrors = true;
        emailError = true;
    }

    if (phone == '' || phone.length  <= 7) {
        fieldErrors = true;
        phoneError = true;
    }

    if (message == '' || message.length <= 5) {
        fieldErrors = true;
        messageError = true;

    }

    // let the user know if there are errors with the form
    if (fieldErrors) {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>').fadeIn('normal');

        if (nameError) {
          $('#responseName').append('<p>Your name' + required +'</p>');       
        }         
        if (phoneError) {
          $('#responsePhone').append('<p>Your phone' + required +'</p>');       
        }         
        if (emailError) {
          $('#responseEmail').append('<p>Your email' + required +'</p>');       
        }         
        if (messageError) {
          $('#responseMessage').append('<p>A message' + required +'</p>');       
        }         

    }
    // 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);           
    }           

});