Skip to main content

JQGrid Custom Validation - How to Check If Email ID Already Exists in jqGrid

How to Check If Email ID Already Exists in jqGrid

Validating whether an email ID already exists is a common requirement in web development. In this guide, we'll show you how to implement this validation in a jqGrid using a custom function.

Step 1: Define the Grid Column

First, define the column for the email ID in your jqGrid. Add the custom validation rule and specify the custom function:

colModel: [
    {
        name: 'emailId',
        index: 'emailId',
        width: 200,
        editable: true,
        sorttype: 'int',
        editrules: {
            email: true,
            required: true,
            custom: true,
            custom_func: checkvalid
        }
    }
]

Step 2: Implement the Custom Validation Function

Next, implement the checkvalid function to check if the email ID already exists:

function checkvalid(value, colname) {
    var gr = jQuery("#list2").getGridParam('selarrrow');
    if (gr == '') {
        var flag = false;
        var allRowsInGrid = $("#list2").getGridParam("records");
        for (i = 1; i <= allRowsInGrid; i++) {
            var rowId = $("#list2").getRowData(i);
            var emailId = rowId['emailId'];
            if (emailId == value) {
                flag = true;
            }
        }
        if (flag == true) {
            return [false, "Email Id: Email already exists, please enter a different email ID."];
        } else {
            return [true, ""];
        }
    } else {
        return [true, ""];
    }
}

Step 3: Explanation of the Code

Let's break down the checkvalid function:

  • gr: Gets the selected rows in the grid.
  • If no rows are selected, it iterates through all rows in the grid.
  • Compares each email ID in the grid with the provided value.
  • If a match is found, it sets the flag to true.
  • If the flag is true, it returns an error message. Otherwise, it returns true.

Conclusion

By following these steps, you can implement a custom validation function in jqGrid to check if an email ID already exists. This helps ensure data integrity and prevents duplicate entries.

Comments

Popular posts from this blog

Handling Change Events in jqGrid

Handling Change Events in jqGrid In this tutorial, we'll explore how to handle the change event in jqGrid to dynamically update another column based on the selected value. This approach is useful when you need to update related data based on user selections. Example Scenario Let's say we have a jqGrid table with two columns: Country and State. When the user selects a country, the State column should dynamically update to show the relevant states for the selected country. Implementation We'll use the dataEvents option in the colModel configuration to handle the change event. HTML Structure First, let's set up our basic HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H...

Handling Row Selection in jqGrid with jQuery

Handling Row Selection in jqGrid with jQuery The example below specifies the action to take when a row is selected in a jqGrid: var lastSel; jQuery("#gridid").jqGrid({ ... onSelectRow: function(id) { if(id && id !== lastSel) { jQuery('#gridid').restoreRow(lastSel); lastSel = id; } jQuery('#gridid').editRow(id, true); }, ... }); Explanation This script sets up a jqGrid with a custom action for when a row is selected. Here’s a step-by-step explanation: var lastSel; : A variable to store the last selected row ID. jQuery("#gridid").jqGrid({ ... }); : Initializes the jqGrid on the element with ID gridid . onSelectRow: function(id) { ... } : Defines a function to execute when a row is selected. ...

Persisting jqGrid State with Cookies

Persisting jqGrid State with Cookies jqGrid is an excellent jQuery plugin for displaying a grid. To enhance user experience, we added some filter possibilities and used jQuery to update the URL where data was fetched from. However, when users navigated away from the grid and returned, it would reset to its start position, losing any filtering or sorting they had set. To solve this, we needed to store the user's selections. Here are two JavaScript functions that achieve this using cookies: function saveGridToCookie(name, grid) { var gridInfo = new Object(); name = name + window.location.pathname; gridInfo.url = grid.jqGrid('getGridParam', 'url'); gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname'); gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder'); gridInfo.selrow = grid.jqGrid('getGridParam', 'selro...