Dynamische Änderung einer jQuery-Regel, wenn ein Kontrollkästchen aktiviert ist

Question

Ich benutze jQuery Validation, um ein Formular zu validieren, und was ich tun möchte, ist dies ... Ich möchte es so einstellen, wenn ein Kontrollkästchen aktiviert ist als ein Eingabefeld wird zum Beispiel anders validiert.

Dies ist, wie sollte es, wenn das Kontrollkästchen nicht aktiviert ist validieren werden:

weight: { required: true, max: 50 } 

Dies ist, wie es überprüft werden soll, wenn es aktiviert ist.

weight: { required: true, max: 100 } 

Irgendwelche Ideen?

Answer 1

Verwenden Sie die Validate plugin's built-in rules('add') method, um die Regel dynamisch zu ändern, wenn das Kontrollkästchen angeklickt wird.

jQuery:

$(document).ready(function() { 

    // initialize the plugin 
    $('#myform').validate({ 
     // other options, 
     rules: { 
      // other rules, 
      weight: { 
       required: true, 
       max: 50 // initial value on load 
      } 
     } 
    }); 

    // change the rule on checkbox and update displayed message dynamically 
    $('#check').on('change', function() { 
     if ($(this).is(':checked')) { 
      $('#weight').rules('add', { 
       max: 100 
      }); 
     } else { 
      $('#weight').rules('add', { 
       max: 50 
      }); 
     }; 
     $('#weight.error').each(function() { 
      $(this).valid(); 
     }); 
    }); 

}); 

HTML:

<form id="myform"> 
    <input type="checkbox" id="check" /> 
    <input type="text" id="weight" name="weight" /> 
    <input type="submit" /> 
</form> 

Arbeits Demo: http://jsfiddle.net/3hGxS/

Answer 2

die die max Methode zur Regel machen und eine Funktion als pa Rameter. Dies wird ausgewertet, wenn das Feld validiert wird, dh wenn element() für das Feld aufgerufen wird.

Regeln Definition wie diese auch

rules: { 
    field1: 
    { 
     required: true, 
     max: function() { return $("#mycheckbox:checked").length ? 100 : 50; } 
    } 
} 

sieht, revalidate das Zielfeld, wenn Regeländerungen oder Sie können mit einer Fehlermeldung, die nicht mehr

$('#mycheckbox').on('change', function() { 
    $('#field1.error').each(function() { 
     $(this).valid(); 
    }); 
}); 

Notiz gelassen werden, dass dies nur revalidates gilt das Feld, wenn es bereits validiert ist, auf das Vorhandensein der Standard errorClass 'Fehler' überprüft.

mit html wie folgt

<input name="mycheckbox" id="mycheckbox" type="checkbox" /> 
<input name="field1" id="field1"> 
<input type="submit" /> 

Voll JavaScript-Code ist wie diese, find the fiddle here

$(function() { 

    $("form").validate({ 
     rules: { 
      field1: 
      { 
      required: true, 
      max: function() { 
        return $("#mycheckbox:checked").length ? 100 : 50; 
       } 
      } 
     }, 
     submitHandler: function() { 
      alert('form ok'); 
     } 
    }); 

    $('#mycheckbox').on('change', function() { 
     $('#field1.error').each(function() { 
      $(this).valid(); 
     }); 
    }); 

});