Your code is working, but the page is being submitted before the message can be shown.
You need to call
e.preventDefault()
if your validation fails:
$(function(){
$("#submit-button").click(function(e){
var firstName = $("#first-name").val();
if (firstName.length === 0){
$("#p1").text("*Field must be filled!*");
$("#first-name").focus();
e.preventDefault();
return;
}
if (!firstName.match(/^[a-zA-Z]+$/)){
$("#p1").text("Please use alphabets only.");
$("#first-name").focus();
e.preventDefault();
return;
}
});
});
You might be better off looking at the
jQuery Validation Plugin[
^] instead.