Assistance with the JQuery Validation Plugin

Question

Assistance with the JQuery Validation Plugin

Currently, I am utilizing the JQuery validation plugin to validate a form. However, in addition to displaying an error message, I also want it to modify the CSS for the td element above it. This is my current implementation:

function handleValidationErrors(element) {
    element.closest("td").addClass("customValidationErrorClass");
}
$("#form691575").validate({
    errorPlacement: handleValidationErrors,
    rules: {
        field7014601: {
            required: true
        }
});

The form ID is form691575 and field7014601 pertains to a name field. Although I cobbled together the handleValidationErrors function based on another suggestion I came across, I would appreciate a more streamlined approach that achieves the same outcome.

Thank you.

javascript jquery html css validation

Answer 1

Answer №1

While I cannot give you a solution tailored to your specific situation (without using HTML), I can guide you on how to modify the default "highlight" action of validate.

Let's take this hypothetical scenario with the given HTML code:

<form action="#">
  <table>
    <tr>
      <td>
        <input id='firstname' name='firstname' class='required' />
      </td>
    </tr>
    <tr>
      <td>
        <input id='lastname' name='lastname' class='required' />
      </td>
    </tr>
  </table>
  <input type="submit" value="submit" />
</form>

You can set up validate to change the color of the parent tr to red like so:

$("form").validate({
  errorClass: "error",
  highlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .addClass(errorClass)
      .removeClass(validClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .removeClass(errorClass)
      .addClass(validClass);
  }
});

For an example, refer to: http://jsbin.com/afoju5/3/edit

If you require more precise control over error display actions, explore the showErrors option.

Answer 2

While I cannot give you a solution tailored to your specific situation (without using HTML), I can guide you on how to modify the default "highlight" action of validate.

Let's take this hypothetical scenario with the given HTML code:

<form action="#">
  <table>
    <tr>
      <td>
        <input id='firstname' name='firstname' class='required' />
      </td>
    </tr>
    <tr>
      <td>
        <input id='lastname' name='lastname' class='required' />
      </td>
    </tr>
  </table>
  <input type="submit" value="submit" />
</form>

You can set up validate to change the color of the parent tr to red like so:

$("form").validate({
  errorClass: "error",
  highlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .addClass(errorClass)
      .removeClass(validClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .removeClass(errorClass)
      .addClass(validClass);
  }
});

For an example, refer to: http://jsbin.com/afoju5/3/edit

If you require more precise control over error display actions, explore the showErrors option.

Assistance with the JQuery Validation Plugin

Answer №1

Similar questions

The code functions perfectly on JSfiddle, but for some reason it halts when implemented on

Ajax request results in a 400 error code

How to use the filter() method to filter an array of objects based on a nested array within each object

Align text to the right and do not include any images

Utilizing Server-Sent Events to display a interactive navigation button

Trouble encountered with bootstrap toggling when multiple identical inputs are used

Execute Babel task individually for each file instead of running it on the entire directory, Grunt

I am experiencing issues with my $ajax request

Developing TypeScript applications often involves using JavaScript callbacks in order

Vue.js and axios causing an empty array after the page is refreshed

Utilizing Highcharts for Dynamic Data Loading via AJAX

ui-router: Issues with utilizing the <ui-view> element within a bespoke directive

What is the best way to send multiple id values with the same classname as an array to the database via AJAX in Codeigniter?

Strategies for transferring data between JavaScript objects

Upgrading to Postgres 9.3 for Improved JSON Handling and Date Object Support

Toggling reverses multiple CSS keyframe animations

Centered title in side menu for Ionic 3

Adjusting the text and background hues using JavaScript results in an immediate reversal

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

Acquire the id_token from Google using oauth2