Need to create the validations for employee portal using jQuery

I'm new to the jQuery, I need to create the validations for email and names, I had already tried for empty column, Its working properly,

My Jquery Code is:

 $(document).ready(function() {

    var apiHost = "";
    var apiResUrl = "/v1/resources";
    var apiValuesUrl = "/v1/values";
    var apiAddNewEmployee = "/addemployee";
    var apiGetEmployees = "/getemployees";

    var addEmpValidation = function() {
    var fname = $("#fname").val();
    var lname = $("#lname").val();
    var email = $("#email").val();
    if (fname == undefined || fname == "") {
        $(".newEmperrorMSG").text("Please Fill Emp First Name !!!");
        $(".newEmperrorMSG").show();
    }        
    else if (lname == undefined || lname == "") {
        $(".newEmperrorMSG").text("Please Fill Emp Last Name !!!");
        $(".newEmperrorMSG").show();
    }        
    else if (email == undefined || email == "") {
        $(".newEmperrorMSG").text("Please Fill Email !!!");
        $(".newEmperrorMSG").show();
    }        
    else {
        addEmployee();
        $('#new-employee').modal('hide');
    }
};

var loadEmployee = function() {
    var page = 1;
    empajax("sort:descending AND (-id:1000)", page);
    $("#navigationdiv").hide();
    $("#searchdiv").show();
    $("#custompanel").show();
    $(".successMSG").hide();
    $(".errorMSG").hide();
    $(".newEmperrorMSG").hide();
    $("#addEmp").on('click', function() {
        $("#empID").val(getEmployeeID());
        $('#new-employee').modal('show');
    });
    $('#dashSubBtn').on('click', function(e) {
        e.preventDefault();
        addEmpValidation();
    });
    };

var loadDashboard = function() {
    $("#searchdiv").hide();
    $("#navigationdiv").show();
    $("#custompanel").hide();
    $("#defaultpanel").show();
    if (empRole == 'admin') {
        $("#empPortal").css("display", "block");
    } else {
        $("#empPortal").hide();
    }
    $('#logout').on('click', function() {
        processLogout();
    });
    $('#empPortal').on('click', function() {
        $("#defaultpanel").hide();
        ajaxLoader("0.2", true);
        if (empRole == 'admin') {
            $("#custompanel").load('/EMS/html/employee.html', function() {
                loadEmployee();
                ajaxLoader("1", false);
            });
        } else {
            $("#custompanel").load('/EMS/html/notauthorized.html', function() {
                $("#custompanel").show();
                $('#empPortal').hide();
                ajaxLoader("1", false);
            });
        }
        /*ajaxLoader("1", false);*/
    });
    }

    var addEmployee = function() {
    var data = $(newEmpForm).serializeArray();
    $(".successMSG").hide();
    $(".errorMSG").hide();
    $.ajax({
        url: apiHost + apiResUrl + apiAddNewEmployee,
        type: 'POST',
        data: JSON.stringify(data),
        headers: { token: $.cookie('token') },
        contentType: "application/json",
        error: function(err) {
            logoutFromApp();
        },
        success: function(data) {
            if (!isEmpty(data.response.status) && data.response.status.toLowerCase() == "invalid") {
                logoutFromApp();
            } else {
                if ((data.response.message != undefined) || (data.response.message != "")) {
                    $(".successMSG").text(data.response.message);
                    $(".successMSG").show();
                }
                searchEmployees(false);
                $(".successMSG").delay(3000).fadeOut(2000);
                $(".errorMSG").delay(3000).fadeOut(2000);
            }
        }
    });
};
});

HTML I have used as:

<div class="modal fade" id="new-employee" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
            </div>
            <div class="modal-body">
                <form id="newEmpForm" class="form-horizontal">
                    <span class="alert alert-danger newEmperrorMSG" style="display:none"></span>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Employee ID <span class="asterisk">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" name="empID" id="empID" class="form-control" readonly="readonly" placeholder="Employee ID..." required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Emp First Name <span class="asterisk">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" name="fname" class="form-control" id="fname" placeholder="Employee First Name..." required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Emp Last Name <span class="asterisk">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" name="lname" class="form-control" id="lname" placeholder="Employee Last Name..." required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Email ID <span class="asterisk">*</span></label>
                        <div class="col-sm-9">
                            <input type="email" name="email" class="form-control" id="email" placeholder="Employee Email ID..." required />
                        </div>
                    </div>
                    <!-- panel-footer -->
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button class="btn btn-primary" id="dashSubBtn">Add</button>
                                <button type="reset" class="btn btn-default" id="dashResetBtn">Reset</button>
                            </div>
                        </div>
                    </div>
                    <!-- panel -->
                </form>
            </div>
        </div>
        <!-- modal-content -->
    </div>
    </div>

I want to make the validations for names and email ids:

1) first names and last names - I already write for if it is blank, thats shows the error, Now I want it as if the number comes into name or special character comes into name means it have to show different error.

2) For the email id, I need the "@gmail.com" must to be in the mail id or otherwise it have to show and also the special character names.

Please I'm new to the jQuery, can anyone please suggest me some code for this by using my code. Thanks in advance.