我试图创建一个基本的验证我的HTML表单，我使用Jquery的值来实现这一点。我的主要问题是，即使某些字段仍然无效，也要提交表单。我的第二个问题是，我想要显示的自定义消息不出现。这是我的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"
}
}
});
我认为这将工作。您需要确保在执行脚本之前加载了DOM，并使用:
包装$(function() { . . . });
和，我认为validate插件不支持:
lettersonly:没错数字:真phoneUS:真正的
你得调查一下。无论如何，这似乎工作:
<!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>
见:
jQuery验证插件:只接受字母?
关于自定义验证器方法的其他问题