【发布时间】：2016-07-04 14:54:17
【问题描述】：
我正在尝试创建我的 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"
}
}
});
提前致谢。
【问题讨论】：
-
这应该是因为一些错误。当你提交表单时出现错误，验证码失败，提交表单时不受jquery validate控制。
-
^ 要补充这一点，请检查控制台代码中的错误
-
要在错误控制台中检查它，您需要启用
persistent选项，因为一旦您在控制台中收到错误消息，表单提交就会导致页面刷新。 -
谢谢，我将使用持久选项检查控制台。我仍然是这方面的菜鸟，所以可能需要一段时间。
标签： jquery forms jquery-validate