troubleshooting Question

Need to create the validations for employee portal using jQuery

Avatar of Boopathy S
Boopathy SFlag for India asked on
HTMLUI/UXJavaScriptjQuery
2 Comments1 Solution180 ViewsLast Modified:
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.
ASKER CERTIFIED SOLUTION
M. Tariq
Application Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros