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.
Boopathy SAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

M. TariqApplication DeveloperCommented:
Hey Boopathy,
var firstName = $.trim($("#FirstNameID").val());
var email = $.trim($("##EmailID").val());
var nameRegx = /[^a-z]/i;
var emailRegx = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if(firstName.length == 0)
{
// Show error
}
else if(!nameRegx .test(firstName))
{
// Show error
}
if(email.length == 0)
{
// Show error
}
else if(!emailRegx .test(email))
{
// Show error
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Boopathy SAuthor Commented:
Thank You
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.