2017-04-04 147 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