Tự động thay đổi quy tắc Xác thực jQuery khi hộp kiểm được chọn

Question

Tôi đang sử dụng Xác thực jQuery để xác thực biểu mẫu và những gì tôi muốn làm là ... Tôi muốn nó được đặt nếu hộp kiểm được chọn hơn hộp chỉnh sửa được xác nhận khác nhau, ví dụ.

Đây là cách nó nên được xác nhận nếu hộp kiểm không được chọn:

weight: { required: true, max: 50 } 

Đây là cách nó nên được xác thực nếu nó được kiểm tra.

weight: { required: true, max: 100 } 

Bất kỳ ý tưởng nào?

Answer 1

Bạn muốn sử dụng Validate plugin's built-in rules('add') method để tự động thay đổi quy tắc bất cứ khi nào hộp kiểm được nhấp.

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> 

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

Answer 2

Thực hiện một quy tắc sử dụng các max phương pháp và chức năng như một pa rameter. Điều này sẽ được đánh giá khi trường được xác nhận hợp lệ, tức là khi phần tử() được gọi trên trường.

quy tắc định nghĩa trông như thế này

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

Ngoài ra, hợp lệ lại lĩnh vực mục tiêu khi thay đổi quy tắc hoặc bạn có thể bị bỏ lại với một thông báo lỗi rằng không còn được áp dụng

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

lưu ý rằng revalidates chỉ này trường nếu nó đã được xác thực, kiểm tra sự hiện diện của lỗi errorClass 'lỗi' mặc định.

với html như thế này

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

Toàn mã JavaScript là như thế này, 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(); 
     }); 
    }); 

});