61112

jQuery validate and groups - doesn't work properly when second field value is correct?

I have some fields, which are part of group - demo. When user inputs wrong data in first field (Digits (1 to 10) in my demo), then error message is shown. But when user inputs correct data in the second field (Digits (11 to 20)), this message disappears, when one field in the group still contains incorrect data. Moreover, error class is removed (this is not visible in the demo).

How can I correct that?

Answer1:

It's a known fact this problem with groups on jQuery validation.

My solution is very simple.

First of all, you need to add the same class to all of your inputs in the group:

<input id="firstInGroup" class="groupBug"> <input id="secondInGroup" class="groupBug"> <input id="thirdInGroup" class="groupBug">

Then, you create a trigger to that class

$('.groupBug').change(function(){ if($(this).siblings().valid()){ //all items of the group are valid, do nothing or manually add valid class }else{ //add the error class to the parent div, or whatever you want for the error }

It worked for me with a couple of selects.

Answer2:

The validation you wanna don't need to be a grouped one...

What is happening with your code is that when you group a validation only one error element is created and since the validation occurrs, by default, onfocusout or onkeyup, each element that has a rule different from 'required' is tested on these events.

So, when the validation tests the first field and find an error, it shows the message, but when the validation tests the second one and this is correct, it remove the error message.

What you need is remove the group from these fields since they don't be a group validation, or cancel the validation from starting on focusout or keyup events

Recommend

  • How to issue a command that produces infinite output and return immediately
  • Regex for incomplete lines within known start and end strings
  • Accessing another variable in the same class with a click event
  • My first C# WPF ValidationRule is not firing
  • Why can't UI components be accessed from a backgroundworker?
  • Accessing Rows In A LINQ Result Without A Foreach Loop?
  • jquery validation - waiting for remote check to complete
  • iText RadioGroup/RadioButtons across multiple PdfPCells
  • How to getText() from the input field of an angularjs Application
  • Login not working in Firefox in Meteor
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • CakePHP 2.0.4 - findBy magic methods with conditions
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Transactional Create with Validation in ServiceStack Redis Client
  • Could not find rake using whenever rails
  • What is the “return” in scheme?
  • Excel - Autoshape get it's name from cell (value)
  • Check if a string to interpolate provides expected placeholders
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • ORA-29908: missing primary invocation for ancillary operator
  • jQuery tmpl and DataLink beta
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Angular 2 constructor injection vs direct access
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Android Google Maps API OnLocationChanged only called once
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Converting MP3 duration time
  • Conditional In-Line CSS for IE and Others?