jquery validation disabled button until input is valid

Question

Hello I have this form that allow user to update their detail in my customised web app, Here is 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>&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>

And here is the jquery validation:

    $.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:''
            }
         
        }
    });

For the submit button I added the disable method until a valid email enter:

 <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>

And here is my code that remove disabled tag when the email is valid:

    $("#zendeskApiAuth").on("keypress", function(){
        if($(".updateCustomerClient").valid())
        {
            $(".btn-reset").removeAttr("disabled");
        }
    });

Everything is working like expected but when I hit on that page the Submit button already disabled let say if the user want to change other detail rather than the Zendesk Api Auth(email) they would not be able to submit. Any ideas how can I work around this?

Answer 1

I found a fixed:

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