Hey there! I've set up a form in my custom web app that allows users to update their details. Check out the code:
<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>
...
</thead>
</table>
</div>
</div>
</div>
</g:form>
Additionally, here's the jQuery validation script that ensures proper inputs:
$.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:''
}
}
});
To address the issue of the Submit button being disabled prematurely, you can use the following code snippet that enables the button when a valid input is detected:
$("#zendeskApiAuth").on("keypress", function(){
if($(".updateCustomerClient").valid())
{
$(".btn-reset").removeAttr("disabled");
}
});
With these tweaks, your form should now work smoothly without restricting user submissions unnecessarily!