我需要帮助编写jquery验证规则(我正在使用Jquery Validation Plugin)来实现以下场景。
以下是情景......
根据第一个下拉值,将启用第二个下拉列表。我们需要从第二个下拉列表中进行选择,并使用“添加”按钮将其添加到表中。
验证规则应如下所示。
如果第一个下拉选项启用了第二个下拉列表,但非第二个下拉列表中的值被添加到表中(我的意思是表为空),那么我们需要在点击提交按钮时显示第二个下拉列表的错误消息表格。
我尝试添加attr like" data-rule- {addmethod_rulename}"第二次下拉并使用第一个下拉值和表大小编写自定义addmethod规则,但它不起作用。
JSP代码:
<form ....>
:
:
:
<b:form-group label="${firstdropdown}" labelFor="firstdropdown" cssBody="col-sm-2" cssClass="required">
<form:select path="firstdropdown" name="firstdropdown" class="form-control" required="required">
<form:option value="" label=""/>
<form:options items="${firstdropdownvalues}"/> {This items has two values - One will disable below dropdown and another will enable}.
</form:select>
</b:form-group>
:
:
:
<b:form-group label="${seconddropdown}" labelFor="seconddropdown" cssBody="col-sm-4" cssClass="required">
<div class="form-inline">
<select name="seconddropdown" class="form-control" disabled>
<option value=""></option>
<c:forEach items="${values}" var="dropdown">
<option value="${dropdown.name}">${dropdown.name}</option> {This items will have several values - we can select one by one and add it to below table using this addsite button}.
</c:forEach>
</select>
<button id="addbtn" type="button" class="btn btn-primary" disabled><spring:message code="form.button.platform.addbtn"/></button>
</div>
</b:form-group>
:
:
:
<b:form-group cssBody="col-sm-6">
<table id="pfmtable" class="table table-striped table-bordered dt-responsive">
<thead>
<tr>
<th><input name="select_all" type="checkbox"/></th>
<th>Sites</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</b:form-group>
:
:
:
</form>
Javascript代码:
jQuery.validator.addMethod("isadded", function(value, element) {
return $('#firstdropdown').val() == 'Enable_Value' && $("#pfmtabletr").length > 0;
}, "* Atleast one site should be selected");
$('button:submit').click(function(){
var name = $('#name').val();
var $form = $('form');
$form.validate({
rules:{
seconddropdown: {isadded: true}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},