Hice un formulario de validación simple usando jQuery. Está funcionando bien. El caso es que no estoy satisfecho con mi código. ¿Hay otra forma de escribir mi código con el mismo resultado de salida?
$(document).ready(function(){
$('.submit').click(function(){
validateForm();
});
function validateForm(){
var nameReg = /^[A-Za-z]+$/;
var numberReg = /^[0-9]+$/;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var names = $('#nameInput').val();
var company = $('#companyInput').val();
var email = $('#emailInput').val();
var telephone = $('#telInput').val();
var message = $('#messageInput').val();
var inputVal = new Array(names, company, email, telephone, message);
var inputMessage = new Array("name", "company", "email address", "telephone number", "message");
$('.error').hide();
if(inputVal[0] == ""){
$('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
}
else if(!nameReg.test(names)){
$('#nameLabel').after('<span class="error"> Letters only</span>');
}
if(inputVal[1] == ""){
$('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
}
if(inputVal[2] == ""){
$('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
}
else if(!emailReg.test(email)){
$('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
}
if(inputVal[3] == ""){
$('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
}
else if(!numberReg.test(telephone)){
$('#telephoneLabel').after('<span class="error"> Numbers only</span>');
}
if(inputVal[4] == ""){
$('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
}
}
});
jquery
validation
jhedm
fuente
fuente
$('form')[0].checkValidity()
Respuestas:
Simplemente puede usar el complemento jQuery Validate de la siguiente manera.
jQuery :
HTML :
DEMO: http://jsfiddle.net/xs5vrrso/
Opciones: http://jqueryvalidation.org/validate
Métodos: http://jqueryvalidation.org/category/plugin/
Reglas estándar : http://jqueryvalidation.org/category/methods/
Reglas opcionales disponibles con el
additional-methods.js
archivo :fuente
puede usar el validador jquery para eso, pero necesita agregar el archivo jquery.validate.js y jquery.form.js para eso. después de incluir el archivo de validación, defina su validación de esta manera.
Puede ver que
required : true
hay muchas más propiedades como para el correo electrónico que puede definiremail : true
para el númeronumber : true
fuente
jquery.form.js
está obligado a utilizar el código que ha mostrado.