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.