Dynamiczna zmiana reguły sprawdzania poprawności jQuery, gdy pole wyboru jest zaznaczone

Question

Używam sprawdzania poprawności formularza jQuery do sprawdzania poprawności formularza, a co chciałbym zrobić to ... Chcę to ustawić, więc jeśli pole wyboru jest zaznaczone niż pole edycji jest sprawdzany na przykład inaczej.

ten sposób należy zweryfikować, czy pole wyboru nie jest zaznaczone:

weight: { required: true, max: 50 } 

To właśnie powinno być zatwierdzone, jeśli jest zaznaczone.

weight: { required: true, max: 100 } 

Jakieś pomysły?

Answer 1

Użytkownik użyje Validate plugin's built-in rules('add') method, aby dynamicznie zmieniać regułę po kliknięciu pola wyboru.

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> 

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

Answer 2

Dodać regułę przy użyciu metody max i funkcję jako pa rameter. Zostanie to ocenione, gdy pole zostanie zatwierdzone, tzn. Gdy element() zostanie wywołany na polu.

zasady definicja wygląda następująco

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

Również revalidate pola docelowego, gdy zmiany przepisów lub może być pozostawiony z komunikatem o błędzie, że nie ma już zastosowania

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

Zauważ, że to tylko odnawia pole, jeśli jest już zatwierdzone, sprawdzając obecność domyślnego "błędu" errorClass.

z html jak to

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

Pełny kod JavaScript jest tak, 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(); 
     }); 
    }); 

});