您好，我有这个表单，允许用户在我的自定义 Web 应用程序中更新他们的详细信息，这是代码：
<g:form class = "updateCustomerClient" controller="customerClient" action="updateCustomerClient" id="${cus.id}">
<div style="width:100%; padding-top: 50px; margin-right: auto; margin-left: auto; text-align: center">
<div style = "height: 50vh; width: 50%; margin-left:auto; margin-right:auto;">
<div>
%{-- Table for customer client--}%
<table class="table table-striped" id="table t1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th colspan="5" style="height: 40px;">
<h6 style="font-weight: bold; margin-left: 40px;">
<g:link action="index" controller="customer">All Customers</g:link> >>
<g:link action="index" controller="customerClient">${customers.name} clients</g:link> >>
<a href="#" onclick="goBack()">${cus.clientName}</a> >> EDIT
</h6>
</th>
</tr>
<tr>
<th colspan="5" style="height: 40px; text-align:center;background-color:lightseagreen"><h6 style="font-weight: bold">EDIT CUSTOMER CLIENT</h6></th>
</tr>
%{-- <tr style="width:100%; height: 20px;">--}%
%{-- <td colspan="2" style="text-align: right;"> <g:link action="index" controller="customer"><button id = "back" type="button" class="btn btn-primary" style = "font-weight: bold"><i id = "back-icon" class="fa fa-chevron-left" aria-hidden="true"></i>Back</button></g:link></td>--}%
%{-- </tr>--}%
<tr style="width:100%; height: 70px;">
<td style = "width:50%; font-weight: bold; text-align: right;padding-right: 20px;">Customer Name:</td>
<td style = "width:50%; font-weight: bold; text-align: left;padding-left: 20px;"><label value = "${customers.name}"style = "font-weight: bold;color:lightseagreen;"> ${customers.name} </label></td>
</tr>
<td style = "width:50%; font-weight: bold; text-align: left;padding-left: 20px;"><g:hiddenField required ="true" value = "${customers.id}" class="form-control" name="customerId" from="${customers}" optionKey="id" optionValue="name"></g:hiddenField></td>
<tr style="width:100%;height: 70px;background-color: #f7fafd; ">
%{-- <div class = "col-md-5 text-right" style = "font-weight: bold"><span class="placeholder">Channel ID</span></div>--}%
<td style = "width:50%;font-weight: bold; text-align: right;padding-right: 20px;"><span class="placeholder">Client Name:</span></td>
<td style = "width:50%; font-weight: bold; text-align: left;padding-left: 20px;"><input value = "${cus.clientName}" required type="text" style = "width: 70%" class="form-control" id="clientname" placeholder="Enter Client Name" name="clientname" ></td>
</tr>
<tr style="height: 70px;">
<td style = "width:50%;font-weight: bold; text-align: right;padding-right: 20px;">Channel:</td>
<td style = "width:50%; font-weight: bold; text-align: left;padding-left: 20px;"><g:select value = "${cus.clientChannel}" required="true" style = "width: 70%" class="form-control" name="clientchannel" from="${["Line","Facebook"]}"></g:select></td>
</tr>
<tr style="height: 70px;background-color: #f7fafd; ">
<td style = "width:50%;font-weight: bold; text-align: right;padding-right: 20px;">Channel ID:</td>
<td style = "width:50%; font-weight: bold; text-align: left;padding-left: 20px;"><input value = "${cus.clientChannelId}" required type="text" style = "width: 70%" class="form-control" id="clientchannelid" placeholder="Enter Channel ID" name="clientchannelid" ></td>
</tr>
<tr style="height: 70px;">
<td style = "width:50%;font-weight: bold; text-align: right;padding-right: 20px;">Zendesk API Auth:</td>
<td style = "width:50%; font-weight: bold; text-align: left;padding-left: 20px;"><input value = "${cus.zendeskApiAuth}" required style = "width: 70%" class="form-control" id="zendeskApiAuth" placeholder="Enter Zendesk API Auth" name="zendeskApiAuth" ></td>
</tr>
<tr style="height: 70px;">
%{-- <g:link><button type="submit" class="btn btn-default confirmation-update" style = "width: 10%;background-color: lightseagreen;color: white;font-weight: bold">Submit</button></g:link>--}%
<td colspan="2" style = "width:50%;font-weight: bold; text-align: center;padding-right: 20px;"><g:link><button type="submit" class="btn-disabled btn-reset btn btn-default confirmation-update" disabled = "true" style = "background-color: lightseagreen;color: white;font-weight: bold">Submit</button></g:link></button>
<g:link controller = "customerClient" action="showCustomerClient" id = "${cus.id}"><button type="button" class="btn btn-danger" style="font-weight: bold">Cancel</button></g:link></td>
</tr>
</thead>
</table>
%{-- End of table for customer client--}%
</div>
</div>
</div>
</g:form>
这是 jquery 验证：
$.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Please provide only alphabet");
$('.updateCustomerClient').validate({
rules: {
clientname: {
lettersonly: true
},
zendeskApiAuth: {
email:true,
required:true
}
},
messages:{
clientname:{
required:''
},
clientchannelid:{
required:''
},
zendeskApiAuth:{
required:''
}
}
});
对于提交按钮，我添加了禁用方法，直到输入有效电子邮件：
<td colspan="2" style = "width:50%;font-weight: bold; text-align: center;padding-right: 20px;"><g:link><button type="submit" class="btn-disabled btn-reset btn btn-default confirmation-update" disabled = "true" style = "background-color: lightseagreen;color: white;font-weight: bold">Submit</button></g:link></button>
这是我在电子邮件有效时删除禁用标签的代码：
$("#zendeskApiAuth").on("keypress", function(){
if($(".updateCustomerClient").valid())
{
$(".btn-reset").removeAttr("disabled");
}
});
一切都按预期工作，但是当我点击该页面时，提交按钮已经禁用，如果用户想要更改其他详细信息而不是 Zendesk Api Auth（电子邮件），他们将无法提交。任何想法我该如何解决这个问题？
我找到了一个固定的：
$('.updateCustomerClient input').on('keyup blur', function () {
if ($('.updateCustomerClient').valid()) {
$('.submit-button').prop('disabled', false);
} else {
$('.submit-button').prop('disabled', 'disabled');
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句