Cambiare dinamicamente un jQuery Valida la regola quando una casella di controllo è spuntata

Question

Sto usando jQuery Validation per convalidare un modulo, e cosa vorrei fare è questo ... lo voglio impostato in modo che se una casella è selezionata di una editbox è validato in modo diverso, per esempio.

Questo è come dovrebbe essere confermare se la casella di controllo non è selezionata:

weight: { required: true, max: 50 } 

Questo è come dovrebbe essere convalidato se è selezionata.

weight: { required: true, max: 100 } 

Qualche idea?

Answer 1

Utilizzerai lo Validate plugin's built-in rules('add') method per modificare dinamicamente la regola ogni volta che si fa clic sulla casella di controllo.

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> 

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

Answer 2

fare una regola utilizzando il metodo max e una funzione come un pa Parametro Tipo. Questo verrà valutato quando il campo viene convalidato, cioè quando element() viene chiamato sul campo.

regole definizione assomiglia a questo

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

Inoltre, rinnovo il campo di destinazione quando i cambiamenti delle regole o si può essere lasciato con un messaggio di errore che non è più applicabile

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

Si noti che questo solo riconvalida il campo se è già validato, verificando la presenza dell'errore errorClass 'error'.

con html come questo

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

codice completo JavaScript è come questo, 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(); 
     }); 
    }); 

});