• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 70
  • Last Modified:

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.
0
Boopathy S
Asked:
Boopathy S
1 Solution
 
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
 
Boopathy SAuthor Commented:
Thank You
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now