Form validation in jQuery without using plugin

Loop through each input element in the form, and check if it has a value. If not append the error message to a string which you later alert out if valid is false.

$('#submit').on('click', function() {
    var valid = true,
        message = '';

    $('form input').each(function() {
        var $this = $(this);

        if(!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please enter your ' + inputName + '\n';
        }
    });

    if(!valid) {
        alert(message);
    }
});

Fiddle: http://jsfiddle.net/WF2J9/17/


If you only want 1 alert to appear at a time you need to check the state of valid for each condition:

$('#submit').on('click', function() {
    valid = true;   

    if (valid && $('#name').val() == '') {
        alert ("please enter your name");
        valid = false;
    }

    if (valid && $('#address').val() == '') {
        alert ("please enter your address");
         valid = false;
    }    

    return valid;
});

Updated fiddle


try following:

  $('#submit').on('click', function() {
    var valid = true,
    errorMessage = "";

    if ($('#name').val() == '') {
       errorMessage  = "please enter your name \n";
       valid = false;
    }

    if ($('#address').val() == '') {
       errorMessage += "please enter your address\n";
       valid = false;
    }    

    if ($('#email').val() == '') {
       errorMessage += "please enter your email\n";
       valid = false;
    } 

    if( !valid && errorMessage.length > 0){
       alert(errorMessage);
    }   
  });

working fiddle here: http://jsfiddle.net/WF2J9/24/

i hope it helps.