jquery验证禁用按钮，直到输入是有效的

Question

你好，我有这个表单，允许用户在我自定义的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>&nbsp;>>&nbsp;
<g:link action="index" controller="customerClient">${customers.name} clients</g:link> &nbsp;>>&nbsp;
<a href="#" onclick="goBack()">${cus.clientName}</a>&nbsp;>>&nbsp;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-zs]+$/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(电子邮件)，他们将无法提交。有什么好主意吗?

Answer 1

我发现了一个固定的:

$('.updateCustomerClient input').on('keyup blur', function () { 
if ($('.updateCustomerClient').valid()) {          
$('.submit-button').prop('disabled', false);        
} else {
$('.submit-button').prop('disabled', 'disabled');  
}
});