Create a unique onblur event listener for every element in a loop in Javascript

Question

Create a unique onblur event listener for every element in a loop in Javascript

https://i.sstatic.net/tRYul.png

I have added several items to a column in the database, but I am unsure of how to implement an onblur function for validation for each item within a loop. For example, if the NAME field is empty, I want to display an alert, and if the length of the NRIC field is less than a certain length, I also want to prompt an alert message. How can I achieve this?

  <script>
  function fnfunction(??)
  {
    //I need help with implementing validation for each item
  } 
  </script>
  <%
   String SQL   = "SELECT * FROM TB_BS_WITH UR";
   String  VALUE1 = "";
   String ROW_NO = "";
   String COL_NO = "";
    DB_Contact.makeConnection();
    DB_Contact.executeQuery(SQL);   
    while(DB_Contact.getNextQuery())
    {
        VALUE1 = DB_Contact.getColumnString("VALUE1");
        ROW_NO = DB_Contact.getColumnString("ROW_NO");
        COL_NO = DB_Contact.getColumnString("COL_NO");
    %>
   <table>
        <tr>
            <%StringTokenizer st1=n ew StringTokenizer(VALUE1, "^"); while(st1.hasMoreTokens()){%>
                <th class="fontSection">
                    <%=st1.nextToken() %>
                </th>
                <%}%>
        </tr>
        <%for(int i=0;i<Integer.parseInt(ROW_NO);i++){ %>
            <tr>
                <%for(int j=0;j<Integer.parseInt(COL_NO);j++){ %>
                    <td>
                        <input type="text"name="<%=j%>_NAME_<%=i %>" id="<%=j%>_NAME_<%=i %>" onblur="fnfunction(???)">
                    </td>
                    <%}%>
            </tr>
            <%}%>
    </table>
    <%
      } DB_Contact.takeDown();
    %>

Current outcome... How do I set up validation for each column? https://i.sstatic.net/tRos4.png

javascript java validation jsp

Answer 1

Answer №1

One way to validate on the blur event is by implementing the following approach.
Avoid assigning the event directly within the input tag; instead, assign it after the page has finished loading.

  window.addEventListener('load', initializePage, false);

  // attach blur event to all input fields
  function initializePage(event) {
    var inputs = document.getElementsByTagName('INPUT');
    for (var i = 0; i < inputs.length; i++) {
      // only consider text fields
      if (e.target.type === 'text') {
        inputs[i].addEventListener('blur', performValidation, false);
      }
    }
  }

  // validate the value of the blurred element
  function performValidation(e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;

    // assuming the id format always follows --> #_FieldName_#
    var fieldName = e.target.id.split('_')[1];

    switch (fieldName) {
      case 'Name':
        if (e.target.value === '') {
          alert(fieldName + ' cannot be left empty!');
          e.target.focus();
        }
        break;

      case 'NRIC':
        if (Number(e.target.value) < 10) {
          alert(fieldName + ' must be at least 10 characters long!');
          e.target.focus();
        }
        break;
    }
  }

Answer 2

One way to validate on the blur event is by implementing the following approach.
Avoid assigning the event directly within the input tag; instead, assign it after the page has finished loading.

  window.addEventListener('load', initializePage, false);

  // attach blur event to all input fields
  function initializePage(event) {
    var inputs = document.getElementsByTagName('INPUT');
    for (var i = 0; i < inputs.length; i++) {
      // only consider text fields
      if (e.target.type === 'text') {
        inputs[i].addEventListener('blur', performValidation, false);
      }
    }
  }

  // validate the value of the blurred element
  function performValidation(e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;

    // assuming the id format always follows --> #_FieldName_#
    var fieldName = e.target.id.split('_')[1];

    switch (fieldName) {
      case 'Name':
        if (e.target.value === '') {
          alert(fieldName + ' cannot be left empty!');
          e.target.focus();
        }
        break;

      case 'NRIC':
        if (Number(e.target.value) < 10) {
          alert(fieldName + ' must be at least 10 characters long!');
          e.target.focus();
        }
        break;
    }
  }

Answer 3

Answer №2

To achieve this, you can follow the example below:

Using JSP:

<input type="text"name="<%=j%>_NAME_<%=i %>" id="<%=j%>_NAME_<%=i %>" onblur="validateInput("+<%=j%>+",this)">

Please pay attention to:

onblur="validateInput("+<%=j%>+",this)"

, where this refers to the current input element.

In JavaScript:

 function validateInput(cellNo,currentInput){

    if(cellNo === 0){
       // Retrieve the value from currentInput and validate it according to your requirements.
    }else if(cellNo == 1){
     // Retrieve the value from currentInput and validate it according to your requirements.
    }
     .
     .
     .
}

Answer 4

To achieve this, you can follow the example below:

Using JSP:

<input type="text"name="<%=j%>_NAME_<%=i %>" id="<%=j%>_NAME_<%=i %>" onblur="validateInput("+<%=j%>+",this)">

Please pay attention to:

onblur="validateInput("+<%=j%>+",this)"

, where this refers to the current input element.

In JavaScript:

 function validateInput(cellNo,currentInput){

    if(cellNo === 0){
       // Retrieve the value from currentInput and validate it according to your requirements.
    }else if(cellNo == 1){
     // Retrieve the value from currentInput and validate it according to your requirements.
    }
     .
     .
     .
}

Create a unique onblur event listener for every element in a loop in Javascript

Answer №1

Answer №2

Similar questions

Tips on sending asynchronous requests to a PHP page using jQuery AJAX

Exploring ways to showcase informational alerts when a link is hovered over by the mouse

Preventing Cross-Site Scripting (XSS) when injecting data into a div

The Angular UI Datepicker is not reflecting changes in scope variables within the dates-disabled function

Send data in JSON format along with an identifier using Jquery AJAX

Is MapView in React Native restricted to explicit markers only?

The operation to remove the child element could not be completed

What are the steps to fixing the date time issue between NextJS and Firebase?

Utilize JSON data loading instead of directly embedding it onto the page for improved website

Modal obstructing BsDatePicker

When altering the color of a mesh in Three.js, only a single face is impacted by the modification

JavaScript is not designed to run a second time

Retrieve JSON object by matching another JSON property

Tips for adding values to an object

Variability in Swagger parameter declaration

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

What is the best way to retrieve information utilizing Http.get within my project?

Having trouble loading my app.js in Angular - Seeking help on Coursera!

Generating a React User-Object in JSON Format

Unable to remove the most recently added Object at the beginning