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，包装为：

- hosts: all
  tasks:
    - debug: msg=test

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

lettersonly：是的数字：是的 phoneUS：是的

你必须研究这个问题。无论如何，这似乎有效：

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

Answer 2

见：

jQuery validate plugin : accept letters only?

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

Jquery validate提交无效表单

JS

2 个答案: