Search code examples
javascriptjquerygrailsgroovyjquery-validate

Jquery validation is not working with g:form

Hello I can not validate my form with jquery validation. it does not giving me any errors but I can still type number and letters to the name field. Here is the code for validation:

jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters");

$('#customer-form').validate({
        rules: {
            name: {
                lettersonly: true
            }
        }
    });

and here is the code for the form:

<html>
<head>
    <title></title>
    <asset:stylesheet src="application.css"/>
    <asset:javascript src="jquery-3.3.1.min.js"/>
    <asset:javascript src="application.js"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

            <g:form controller="customer" action="saveCustomer" class="customer-form">
                <form>



                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" required  class="form-control name" id="name" placeholder="Enter first and last name" name="name">
                </div>
                <div class="form-group">
                    <label for="code">Code</label>
                    <input type="text" required  class="form-control" id="code" placeholder="Enter code" name="code">
                </div>


                <div class="form-group">
                    <label for="contactP">Contact Person</label>
                    <input type="text" class="form-control" id="contactP" placeholder="Enter contact person" name="contactP">
                </div>

                <div class="form-group">
                    <label for="status">Status</label>
                    <select class="form-control" required id="status" name="status">
                        <option disabled selected>Please select a Status</option>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>
               <g:link controller="customer" action="index" ><button type="button" class="btn btn-primary">Cancel</button></g:link>
                <button type="submit" class="btn btn-default" style = "background-color: #b52222">Add</button>
                </form>
                
            </g:form>

Thank you.

Solution

  • You are calling validate on customer-form id.

    $('#customer-form').validate({

    but your form does not have any id. It has a class.

    So either adds an id in the form (id="customer-form") or change jquery code to

    $('.customer-form').validate({