Modifying CSS using jQuery can be achieved with the .parent().addClass method, however, using just .addClass

Question

Modifying CSS using jQuery can be achieved with the .parent().addClass method, however, using just .addClass

When I first started working on my validation using jquery/javascript, it was not very effective. However, with the implementation of a new css class and updates to my jquery validation, things have greatly improved.

I've been focusing on enhancing user input validation in different forms within a web portal based on the python web framework cherrypy, particularly through jquery. Initially, a single check was done for all inputs failing validation, turning borders and labels red. Now, individual checks are performed for each required field, with error messages showing only for fields that fail validation.

My next goal is to reset the css styles back to their defaults before conducting the validation check. This would prevent fields corrected by users from being marked with red borders and labels. Despite this, any fields still failing validation during submission will be highlighted in red again.

Is there a way to achieve this without multiple lines of code at the beginning of the submit function?

document.getElementById('elementHere').style.borderColor = "black";
document.getElementById('elementHere').style.color = "black";

$( document ).ready(function() {
  
  //snip

  $("#btnSubmit").click(function(){
        $("#dlgmessage").html("Processing...");
        $("#dialog-message").dialog("open");
        
        //New Validation
        var validated = "yes";
        var msg = "One or more fields do not meet the validation requirements:<ul>";
        
        //More jquery validations
        
       
      
        //Make sure basic inputs are filled in
        //if (
        //    Clean($("#txtIndex").val()) === "" ||
        //    Clean($("#txtSourcetype").val()) === "" ||
        //    Clean($("#txtUseCase").val()) === "" ||
            //more validation conditions
        //){
            //Error message display
            //console.log("Missing Required Fields");
            // return;
        //}
        
      
      
        //Successful validation
        var postdata = {
            record_id: Clean($("#txtID").val()),
            splunk_index: Clean($("#txtIndex").val()),
           
          
        } ;
       
      
        $.post( "/submit", {data:JSON.stringify(postdata)},
            function( data ) {
                var msg = data;
                                },
            'text'
        );
      
     
    });
});

I'm looking for a solution where the css can be reset automatically, but if specifying each element and its default color is necessary, that's also acceptable.

EDIT:

After reevaluating my previous code which was quite basic, I made significant improvements to make it more dynamic and avoid extensive if statements. The latest version seems promising, as classes are added to html elements, yet the styling changes like applying red color to invalid fields are missing. The earlier method with

$(field_id).parent().addClass("error");

worked for me initially, but now I want only failed fields to turn red.

Below is my updated code

Thank you

$( document ).ready(function() {  
  $("#btnSubmit").click(function(){
        $("#dlgmessage").html("Processing...");
        $("#dialog-message").dialog("open");

        var postdata = {
            splunk_host: Clean($("#txtSplunkHost").val()),
            ip: Clean($("#txtIP").val()),
           
        } ;

        
        //Validation process
      
      
        //---------------------------------------------------------------------------------------------------
     $("#dialog-message").dialog({
      modal: true,
      autoOpen: false,
      position: { my: "top", at: "top", of: $("#page-inner") },
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });    
});

/*========================================
Errors
========================================*/
.error input {
  border: 2px solid red;
}
.error label {
  color: red;
}

<div class="form-group">
<label id="txtSplunkHost_label">Splunk Host (*)</label>
<input class="form-control" placeholder="Splunk Host" id="txtSplunkHost" value="" maxlength="255" autofocus="">
       
</div>
<button type="button" class="btn btn-default" id="btnSubmit">Submit</button>

javascript jquery html css validation

Answer 1

Answer №1

Looking for a more efficient implementation? Here's a dynamic approach that eliminates the need for numerous if conditions and DOM selectors. This method follows the recommended css strategy instead of applying individual style properties.

The code is straightforward and easy to comprehend.

$("#submit").on("click", function(e) {

  //Prevent default form action
  e.preventDefault();

  //Add all inputs into an array
  var inputs = [$("#name"), $("#address")],
    is_form_valid = true;

  //Validations
  for (var i = 0, length = inputs.length; i < length; i++) {
    if (inputs[i].val() == "") {
      inputs[i].parent().addClass("error");
      inputs[i].focus();
      is_form_valid = false;
      break;
    } else {
      inputs[i].parent().removeClass("error");
    }
  }

  //Form has no validation errors.
  if (is_form_valid) {
    //Do your work here...
    alert("Form submitted");
  }

});

.error input[type="text"] {
  border: 2px solid red;
}

.error label {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form novalidate>

  <div class="field">
    <label for="name">Name:</label>
    <input type="text" id="name">
  </div>

  <div class="field">
    <label for="address">Address:</label>
    <input type="text" id="address">
  </div>

  <button id="submit" type="submit">Submit</button>

</form>

UPDATE

It seems you have made some improvements to enhance readability :) While there are various form validation libraries available, I recommend utilizing them without reinventing the wheel. Nonetheless, this exercise serves as good practice in understanding coding standards.

Your issue lies in incorrect placement of css classes within your HTML structure. The classes were specifically added for my structure. In your scenario, access input and label directly with the error class as shown below.

/*========================================
Errors
========================================*/
input.error  {
  border: 2px solid red;
}
label.error  {
  color: red;
}

Answer 2

Looking for a more efficient implementation? Here's a dynamic approach that eliminates the need for numerous if conditions and DOM selectors. This method follows the recommended css strategy instead of applying individual style properties.

The code is straightforward and easy to comprehend.

$("#submit").on("click", function(e) {

  //Prevent default form action
  e.preventDefault();

  //Add all inputs into an array
  var inputs = [$("#name"), $("#address")],
    is_form_valid = true;

  //Validations
  for (var i = 0, length = inputs.length; i < length; i++) {
    if (inputs[i].val() == "") {
      inputs[i].parent().addClass("error");
      inputs[i].focus();
      is_form_valid = false;
      break;
    } else {
      inputs[i].parent().removeClass("error");
    }
  }

  //Form has no validation errors.
  if (is_form_valid) {
    //Do your work here...
    alert("Form submitted");
  }

});

.error input[type="text"] {
  border: 2px solid red;
}

.error label {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form novalidate>

  <div class="field">
    <label for="name">Name:</label>
    <input type="text" id="name">
  </div>

  <div class="field">
    <label for="address">Address:</label>
    <input type="text" id="address">
  </div>

  <button id="submit" type="submit">Submit</button>

</form>

UPDATE

It seems you have made some improvements to enhance readability :) While there are various form validation libraries available, I recommend utilizing them without reinventing the wheel. Nonetheless, this exercise serves as good practice in understanding coding standards.

Your issue lies in incorrect placement of css classes within your HTML structure. The classes were specifically added for my structure. In your scenario, access input and label directly with the error class as shown below.

/*========================================
Errors
========================================*/
input.error  {
  border: 2px solid red;
}
label.error  {
  color: red;
}

Modifying CSS using jQuery can be achieved with the .parent().addClass method, however, using just .addClass

Answer №1

Similar questions

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Remain concealed once the lights dim

Show a flash message and error notification following an AJAX call in Laravel

How to Apply "novalidate" in Bootstrap 4 for Custom Form Validation in Rails 5.1

Determine the sum of all the values entered into the text fields

Exploring an array of objects to find a specific string similar to the one being

"In the most recent version of THREE.js (r82), the shadow is not detectable

Changing Json Data into SQL Database Table

What is the best way to remove any objects in this array that have empty strings as values?

Path of the HTML5 database in Blackberry WebWorks

Unable to pass data from a Jquery ajax request to another function

jQuery AJAX returning an unexpected null value instead of JSON data

Tips for optimizing search functionality in Angular to prevent loading all data at once

Tips for extracting a substring from a string in JavaScript or ReactJS

The TypeScript compiler does not allow a 'number' type to be assigned to 0, 10, or 20, even when the number itself is 0

The function window.dispatchEvent does not function properly in browsers such as Firefox, Safari, and IE

Add a horizontal line between two div elements to create a visual division in the middle

Analyzing the list of paths that are passed to the function

Learn the steps to effortlessly upload a file with the record insert wizard in Dreamweaver using php

Managing clicks outside a specified Component using React Higher Order Components