Execute Validation Function on Every TextField and Radio Button

Question

Execute Validation Function on Every TextField and Radio Button

I'm new to Javascript and struggling to make my function work for both radio buttons and text fields.

Here is the HTML code for the form:

<form action="sendmail.php" method="post" name="cascader"
 onsubmit="prepareEventHandlers()" id="cascader">   
 <div class="TargetCenter">   <p><strong><span class="asterisk">*</span>Target Center</strong>  </p>
 <label>
   <input type="checkbox" name="TargetCountry" value="allCountries" id="TargetCountry" />
   All Countries</label>
  ... (more HTML code) ...
   Switzerland</label>
   
   <!-- More HTML code -->
 </form>

Here is the Javascript code I used for the processTitle textfield:


function prepareEventHandlers() {
    document.getElementById("cascader").onsubmit = function() {
        // prevent form submission without a value in processTitle
        if (document.getElementById("processTitle").value == "") {
            document.getElementById("errorMessage").innerHTML = "Please enter a value";
            window.scrollTo(0, 0);
            document.getElementById('processTitle').style.cssText = 'background-color: #f4fc99;';
            return false;
        } else {
            document.getElementById("errorMessage").innerHTML = "";
            return true;
        }
    };
}

window.onload = function() {
    prepareEventHandlers();
};

function checkFieldValue() {
    if (document.getElementById("processTitle").value != "") {
        document.getElementById('processTitle').style.cssText = 'background-color: #FFF;';
        document.getElementById("errorMessage").innerHTML = "";
    } else {
        document.getElementById('processTitle').style.cssText = 'background-color: #f4fc99;';
    }
}

javascript arrays function

Answer 1

Answer №1

I have implemented a small function to verify if any radio button is selected. You can find the checkRequiredRadioButtons function at the end of the JavaScript code below. Currently, I have linked it to your existing validation failure code.

function prepareEventHandlers() {
        document.getElementById("cascader").onsubmit = function() {
          // prevent a form from submitting if no email.
          if (document.getElementById("processTitle").value == "" || !checkRequiredRadioButtons('cascadeType')) {
            document.getElementById("errorMessage").innerHTML = "Please enter a value";
            // to STOP the form from submitting
            window.scrollTo(0, 0);
            document.getElementById('processTitle').style.cssText = 'background-color: #f4fc99;';
            // to turn the field background color
            return false;
          } else {
            // reset and allow the form to submit
            document.getElementById("errorMessage").innerHTML = "";
            return true;
          }
        };
      }
      // when the document loads
    window.onload = function() {
      prepareEventHandlers();
    };
     // Changes the field color onFocus
    function checkFieldValue() {
      if (document.getElementById("processTitle").value != "") {
        document.getElementById('processTitle').style.cssText = 'background-color: #FFF;';
        document.getElementById("errorMessage").innerHTML = "";
      } else document.getElementById('processTitle').style.cssText = 'background-color: #f4fc99;';
    }

    function checkRequiredRadioButtons(buttonsName) {
      var buttonSet = document.getElementsByName(buttonsName);

      for(i = 0; i < buttonSet.length; i++){
          if(buttonSet[i].checked == true)
            return true;
      }
      return false;
    }

<form action="sendmail.php" method="post" name="cascader" onsubmit="prepareEventHandlers()" id="cascader">
  <div class="TargetCenter">
    <p><strong><span class="asterisk">*</span>Target Center</strong> 
    </p>
    <label>
      <input type="checkbox" name="TargetCountry" value="allCountries" id="TargetCountry" />All Countries</label>
    <label>
      <input type="checkbox" name="TargetCountry" value="France" id="TargetCountry" />France
    </label>

    ... (Other checkbox inputs) ...

    <br />
  </div>
  <!--end of Cascade Target-->
  ... (Other parts of the form) ...
</form>

If you want to dynamically determine whether you are dealing with a textbox or a radio button, you can use Element.getAttribute('type') and compare as shown in the code snippet below:

var allInputs = document.getElementsByTagName('input');
for(i = 0; i < allInputs.length; i++){
    if(allInputs[i].getAttribute('type') == 'radio'){
        // Do radio button handling
    } else if(allInputs[i].getAttribute('type') == 'text'){
        // Do textbox handling  
    }
}

Keep in mind that with this approach, you will iterate through all radio buttons in the group, checked and unchecked, as well as other input types like submit and reset buttons.

Answer 2

I have implemented a small function to verify if any radio button is selected. You can find the checkRequiredRadioButtons function at the end of the JavaScript code below. Currently, I have linked it to your existing validation failure code.

function prepareEventHandlers() {
        document.getElementById("cascader").onsubmit = function() {
          // prevent a form from submitting if no email.
          if (document.getElementById("processTitle").value == "" || !checkRequiredRadioButtons('cascadeType')) {
            document.getElementById("errorMessage").innerHTML = "Please enter a value";
            // to STOP the form from submitting
            window.scrollTo(0, 0);
            document.getElementById('processTitle').style.cssText = 'background-color: #f4fc99;';
            // to turn the field background color
            return false;
          } else {
            // reset and allow the form to submit
            document.getElementById("errorMessage").innerHTML = "";
            return true;
          }
        };
      }
      // when the document loads
    window.onload = function() {
      prepareEventHandlers();
    };
     // Changes the field color onFocus
    function checkFieldValue() {
      if (document.getElementById("processTitle").value != "") {
        document.getElementById('processTitle').style.cssText = 'background-color: #FFF;';
        document.getElementById("errorMessage").innerHTML = "";
      } else document.getElementById('processTitle').style.cssText = 'background-color: #f4fc99;';
    }

    function checkRequiredRadioButtons(buttonsName) {
      var buttonSet = document.getElementsByName(buttonsName);

      for(i = 0; i < buttonSet.length; i++){
          if(buttonSet[i].checked == true)
            return true;
      }
      return false;
    }

<form action="sendmail.php" method="post" name="cascader" onsubmit="prepareEventHandlers()" id="cascader">
  <div class="TargetCenter">
    <p><strong><span class="asterisk">*</span>Target Center</strong> 
    </p>
    <label>
      <input type="checkbox" name="TargetCountry" value="allCountries" id="TargetCountry" />All Countries</label>
    <label>
      <input type="checkbox" name="TargetCountry" value="France" id="TargetCountry" />France
    </label>

    ... (Other checkbox inputs) ...

    <br />
  </div>
  <!--end of Cascade Target-->
  ... (Other parts of the form) ...
</form>

If you want to dynamically determine whether you are dealing with a textbox or a radio button, you can use Element.getAttribute('type') and compare as shown in the code snippet below:

var allInputs = document.getElementsByTagName('input');
for(i = 0; i < allInputs.length; i++){
    if(allInputs[i].getAttribute('type') == 'radio'){
        // Do radio button handling
    } else if(allInputs[i].getAttribute('type') == 'text'){
        // Do textbox handling  
    }
}

Keep in mind that with this approach, you will iterate through all radio buttons in the group, checked and unchecked, as well as other input types like submit and reset buttons.

Answer 3

Answer №2

Have you considered using the javascript getElementsByTagName() method? It could be helpful:

function validateFields() {
 var elements = document.getElementsByTagName("input");
 for (var i=0; i<elements.length; i++){
  if(elements[i].value==""){
   elements[i].style.backgroundColor="red";
  }
 }

}

Answer 4

Have you considered using the javascript getElementsByTagName() method? It could be helpful:

function validateFields() {
 var elements = document.getElementsByTagName("input");
 for (var i=0; i<elements.length; i++){
  if(elements[i].value==""){
   elements[i].style.backgroundColor="red";
  }
 }

}

Execute Validation Function on Every TextField and Radio Button

Answer №1

Answer №2

Similar questions

The map markers are nowhere to be found on the map when using Internet Explorer

How do I set up a slideshow to loop continuously?

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

I'm having trouble with successfully multiplying arrays in Java

Ensuring grid columns are equal for varying text sizes

Eliminating certain buttons within Ember-leaflet-draw

Understanding the index_key parameter in the PHP array_column function

What sets apart "React.useState setter" from "this.setState" when updating state?

"Enjoying the convenience of a stationary header while browsing on your smartphone

- What are the steps to integrate a different JavaScript plugin into a React project?

NodeJs and Mysql query execution experiencing significant delays

Issue with ng-grid in AngularJS: Data does not appear after resizing columns

Tips for overlaying an image on a div regardless of its height

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

What is the best way to apply attributes to all titles throughout a webpage?

Global asynchronous functionality can be enabled in JavaScript

Tips on using CSS to hide elements on a webpage with display:none

How can I delete the onmouseover function in HTML?

What benefits does utilizing Microsoft Workflow Foundations offer?

What is preventing the direct passing of the dispatch function from a useState hook into an onClick handler function?