Fiz um formulário de validação simples usando jQuery. Está funcionando bem. O problema é que não estou satisfeito com meu código. Existe outra maneira de escrever meu código com o mesmo resultado de saída?
$(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
fonte
fonte
$('form')[0].checkValidity()
Respostas:
Você pode simplesmente usar o plugin jQuery Validate da seguinte maneira.
jQuery :
HTML :
DEMO: http://jsfiddle.net/xs5vrrso/
Opções: http://jqueryvalidation.org/validate
Métodos: http://jqueryvalidation.org/category/plugin/
Regras padrão : http://jqueryvalidation.org/category/methods/
Regras opcionais disponíveis com o
additional-methods.js
arquivo :fonte
você pode usar o validador jquery para isso, mas você precisa adicionar o arquivo jquery.validate.js e jquery.form.js para isso. depois de incluir o arquivo validador, defina sua validação algo assim.
Você pode ver que
required : true
há muitas outras propriedades, como por e-mail, que você pode definiremail : true
por númeronumber : true
fonte
jquery.form.js
é obrigado a usar o código que você mostrou.