用ajax发布错误消息

Question

I would like to have the error messages post to the field above there inputs fields instead of one generic div above the whole form.

 <div id="response"><!--This will hold our error messages and the response from the server. --></div>  

so my form with the updated 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>

And here is mu current JS I can not figure out what to change in order to get this to work.

$(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();
        }
    }); 
};

Answer 1

@Niya's answer was on the right track, but had a couple typos/bugs. Note that name = '' is an assignment, not an equality check. Here working code…

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

});

Example JSFiddle

Answer 2

Try to change

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

to

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

or

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

Answer 3

I have added some code to your submit to display error above the fields.

$('#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);           
    }           

});