2017-04-04 183 views
0

我正在驗證使用jQuery驗證的表單。表格有3個字段。 1個文本區,1個複選框和1個輸入類型文本。我想動態地驗證表單,即當用戶在輸入類型文本中輸入一些值時,複選框和textarea不是必需的,但如果用戶沒有輸入值,那麼兩者都是必需的。下面的代碼我嘗試過:jQuery表單驗證問題

$("#form").validate({ 
    rules: { 
    inputTypeText: {required: true}, 
    inputTypeCheckbox: {required: false}, 
    textarea: {required: false}, 
    }, 
    messages: { 
    inputTypeText: "This field is required", 
    inputTypeCheckbox: "This field is required", 
    textarea: "This field is required", 
    }, 
    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 
$('#inputTypeText').keyup(function(){ 
    if($(this).val()==''){ 
    $('input[name="inputTypeText"]').rules('add',{required: false}); 
    $('textarea[name="inputTypeCheckbox"]').rules('add',{required: true}); 
    $('input[name="textarea"]').rules('add',{required: true}); 
    }else{ 
    $('input[name="inputTypeText"]').rules('add',{required: true}); 
    $('input[name="inputTypeCheckbox"]').rules('add',{required: false}); 
    $('textarea[name="textarea"]').rules('add',{required: false}); 
    } 
}); 

它會拋出錯誤,如下面的截圖。

enter image description here

請幫我在這。 預先感謝您。

+0

我怎麼能在這個規則得到其他形式的元素值?請解釋我。 – Hardik

回答

2

在jQuery驗證中使用'depends'。

$("#form").validate({ 
rules: { 
inputTypeCheckbox: { 
    required: { 
    depends: function(element) { 
     return $('#input-field').val().length == 0 
    } 
    } 
}, 
textarea: { 
    required: { 
    depends: function(element) { 
     return $('#input-field').val().length == 0 
    } 
    } 
}, 
}, 
messages: { 
inputTypeCheckbox: "This field is required", 
textarea: "This field is required" 
} 
}); 

參見本fiddle