Question

The contact form it´s working, if you fill it all it sends the message. The problem if you don´t fill in the email box, the form doesn´t alert you about it, is there anyway that I can show a word or somekind of alert to the user?

this is my markup:

<div class="form">
        <h2>ESCRIBENOS</h2>
        <form method="post" action="process.php">
        <div class="element">
            <label>Nombre (obligatorio):</label><br/>
            <input type="text" name="name" class="text" />
        </div>
        <div class="element">
            <label>Email (obligatorio):</label><br/>
            <input type="text" name="email" class="text" />
        </div>
        <div class="element">
            <label>Telefono:</label><br/>
            <input type="text" name="website" class="text" />
        </div>
        <div class="element">
            <label>Mensaje:</label><br/>
            <textarea name="comment" class="text textarea" /></textarea>
        </div>
        <div class="element">

            <input type="submit" id="submit"/>
            <div class="loading"></div>
        </div>
        </form>
        </div>

And this is my script:

$(document).ready(function() {

//if submit button is clicked
$('#submit').click(function () {        

    //Get the data from all the fields
    var name = $('input[name=name]');
    var email = $('input[name=email]');
    var website = $('input[name=website]');
    var comment = $('textarea[name=comment]');

    //Simple validation to make sure user entered something
    //If error found, add hightlight class to the text field
    if (name.val()=='') {
        name.addClass('hightlight');
        return false;
    } else name.removeClass('hightlight');

    if (email.val()=='') {
        email.addClass('hightlight');
        return false;
    } else email.removeClass('hightlight');

    if (comment.val()=='') {
        comment.addClass('hightlight');
        return false;
    } else comment.removeClass('hightlight');

    //organize the data properly
    var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' + 
    website.val() + '&comment='  + encodeURIComponent(comment.val());

    //disabled all the text fields
    $('.text').attr('disabled','true');

    //show the loading sign
    $('.loading').show();

    //start the ajax
    $.ajax({
        //this is the php file that processes the data and send mail
        url: "../process.php",  

        //GET method is used
        type: "GET",

        //pass the data         
        data: data,     

        //Do not cache the page
        cache: false,

        //success
        success: function (html) {              
            //if process.php returned 1/true (send mail success)
            if (html==1) {                  
                //hide the form
                $('.form').fadeOut('slow');                 

                //show the success message
                $('.done').fadeIn('slow');

            //if process.php returned 0/false (send mail failed)
            } else alert('Sorry, unexpected error. Please try again later.');               
        }       
    });

    //cancel the submit button default behaviours
    return false;
}); 
}); 

Can someone help me out please?

Answer 1

Try this:

var name = $('input[name=name]');
        var email = $('input[name=email]');
        var website = $('input[name=website]');
        var comment = $('textarea[name=comment]');

        //Simple validation to make sure user entered something
        //If error found, add hightlight class to the text field

        $('input[type=text]').each(function(){
             if($(this).val().length == 0){
                $(this).addClass('hightlight');
                alert('Empty input field')
                return false;
             }
        });

…. rest of your code

Note: This does not work for textarea but I think you can figure that out yourself!

---

EDIT:

  var valid = false;

    $('input[type=text]').each(function(){
             if($(this).val().length == 0){
                $(this).addClass('hightlight');
                alert('Empty input field')
                valid = false;
             }else{
                valid = true;
             }
        });


    if(valid == false) return; 
        console.log('All input fields are filled in..');

… rest of your code. You can remove al the if else statements for input fields. For checking the textarea you could give all fields the same class and do:

$('form.classofallelements').each(function(){