Jquery 验证提交无效表单

Question

我正在尝试创建我的 HTML 表单的基本验证，我正在使用 Jquery Valate 来实现此目的。我的主要问题是，即使某些字段仍然无效，也会提交表单。我的第二个问题是我想显示的自定义消息没有出现。这是我的 HTML：

<head>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="jquery.validate.min.js"></script>
    <script src="mine.js"></script>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<form id="formNewClient" class="form-horizontal" style="margin-right:30px;">
    <h2>Cliente nuevo</h2>
    <div class="form-group">
        <label>Nombre</label>
        <input id="inpClientName" name="inpClientName" type="text" class="form-control" required><span style="color: red">*</span>
    </div>
    <div class="form-group">
        <label for="inpClientId">Id</label>
        <input id="inpClientId" name="inpClientId" type="number" class="form-control" required><span style="color: red">*</span>
    </div>
    <div class="form-group">
        <label for="inpClientAddress">Dirección</label>
        <input id="inpClientAddress" name="inpClientAddress" type="text" class="form-control" required>
    </div>
    <div class="form-group" >
        <label for="inpClientPhone">Teléfono</label>
        <input id="inpClientPhone" name="inpClientPhone" type="tel" class="form-control">
    </div>
    <div class="form-group" >
        <label for="inpClientMail">Email</label>
        <input id="inpClientMail" name="inpClientMail" type="email" class="form-control">
    </div>
    <div class="form-group">
        <input id="submitbutton" class="btn btn-default" type="submit" value="Guardar"/>
    </div>
</form>

</body>

JS

$("#formNewClient").validate({
    rules: {
        inpClientName: {
            required: true,
            minlength:3,
            maxlength: 20,
            lettersonly: true
        },
        inpClientId: {
            required: true,
            minlength: 8,
            maxlength: 8,
            digits: true
        },
        inpClientAddress: {
            required: false,
            minlength:3,
            maxlength: 30
        },

        inpClientPhone: {
            required: false,
            phoneUS: true
        },
        inpClientMail: {
            required: false,
            minlength: 4,
            email: true
        }
    },
    messages: {

        inpClientName: {
            required: "Por favor, ingrese el nombre del cliente",
            minlenght:"El nombre debe ser mayor a 3 caracteres",
            maxlength: "El nombre debe ser menor a los 20 caracteres",
            lettersonly:"El nombre solo debe poseer caracteres"
        },
        inpClientId: {
            required: "Por favor, ingrese el id del cliente",
            minlength: "El id debe tener 8 digitos",
            maxlength: "El id debe tener 8 digitos"
        },
        inpClientAddress: {
            minlength:"La direccion debe ser mayor a dos caracteres",
            maxlength: "La direccion debe ser menor a los 30 caracteres"
        },
        inpClientPhone: {
            required: "Ingrese el numero de telefono",
            phoneUS: "El telefono ingresado no es correcto"
        },

        inpClientMail: {
            minlength: "El mail debe tener por lo menos 6 caracteres",
            email: "Por favor ingresa una dirección de mail válida"
        }
    }
});

提前致谢。

Answer 1

我认为这会奏效。您需要确保 DOM 在执行脚本之前已加载，包裹着：

$(function() { . . . });

而且，我认为验证插件不支持：

仅字母：正确数字：真 phoneUS: true

你必须调查一下。无论如何，这似乎有效：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
        </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js">
        </script>
        <script type="text/javascript">
        $(function() {
            $("#formNewClient").validate({
            rules: {
                inpClientName: {
                    required: true,
                    minlength:3,
                    maxlength: 20
                },
                inpClientId: {
                    required: true,
                    minlength: 8,
                    maxlength: 8,
                    digits: true
                },
                inpClientAddress: {
                    required: true,
                    minlength:3,
                    maxlength: 30
                },

                inpClientPhone: {
                    required: false
                },
                inpClientMail: {
                    required: false,
                    minlength: 4,
                    email: true
                }
            },
            messages: {

                inpClientName: {
                    required: "Por favor, ingrese el nombre del cliente",
                    minlenght:"El nombre debe ser mayor a 3 caracteres",
                    maxlength: "El nombre debe ser menor a los 20 caracteres"
                },
                inpClientId: {
                    required: "Por favor, ingrese el id del cliente",
                    minlength: "El id debe tener 8 digitos",
                    maxlength: "El id debe tener 8 digitos"
                },
                inpClientAddress: {
                    required: "Por favor, ingrese La direccion del cliente",
                    minlength:"La direccion debe ser mayor a dos caracteres",
                    maxlength: "La direccion debe ser menor a los 30 caracteres"
                },
                inpClientPhone: {
                    required: "Ingrese el numero de telefono"
                },

                inpClientMail: {
                    minlength: "El mail debe tener por lo menos 6 caracteres",
                    email: "Por favor ingresa una dirección de mail válida"
                }
            }
            });
            });
        </script>
        <meta charset="UTF-8"> 
        <title>
            Test 
        </title>
    </head>
    <body>
        <form id="formNewClient" class="form-horizontal" style="margin-right:30px;"method="get" action="">
            <h2>
                Cliente nuevo 
            </h2>
            <div class="form-group">
                <label>
                    Nombre 
                </label>
                <input id="inpClientName" name="inpClientName" type="text" class="form-control" required> 
                <span style="color: red">
                    * 
                </span>
            </div>
            <div class="form-group">
                <label for="inpClientId">
                    Id 
                </label>
                <input id="inpClientId" name="inpClientId" type="number" class="form-control" required> 
                <span style="color: red">
                    * 
                </span>
            </div>
            <div class="form-group">
                <label for="inpClientAddress">
                    Dirección 
                </label>
                <input id="inpClientAddress" name="inpClientAddress" type="text" class="form-control" required> 
                <span style="color: red">
                    * 
                </span>
            </div>
            <div class="form-group">
                <label for="inpClientPhone">
                    Teléfono 
                </label>
                <input id="inpClientPhone" name="inpClientPhone" type="tel" class="form-control"> 
            </div>
            <div class="form-group">
                <label for="inpClientMail">
                    Email 
                </label>
                <input id="inpClientMail" name="inpClientMail" type="email" class="form-control"> 
            </div>
            <div class="form-group">
                <input id="submitbutton" class="btn btn-default" type="submit" value="Guardar" /> 
            </div>
        </form>
    </body>
</html>

Answer 2

看到这个：

jQuery validate plugin : accept letters only?

关于其他问题的自定义验证器方法。

Jquery 验证提交无效表单

Jquery validate submits invalid forms

forms

jquery

jquery-validate

JS