Jquery 验证不适用于 g:form

Question

您好，我无法通过 jquery 验证来验证我的表单。它没有给我任何错误，但我仍然可以在名称字段中键入数字和字母。这是验证代码：

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
            }
        }
    });

这是表单的代码：

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

谢谢。

Answer 1

您正在使用 customer-form id 呼叫 validate。

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

但是您的表单没有任何 ID。它有一个 class.

因此要么在表单中添加一个 id (id="customer-form")，要么将 jquery 代码更改为

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

Jquery 验证不适用于 g:form

Jquery validation is not working with g:form

javascript

jquery

grails

groovy

jquery-validate