Un simple script de validación de formularios jQuery [cerrado]

110

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>');
        }       
}   

});
jhedm
fuente
3
sí, puede usar el script de validación jquery para hacerlo mejor.
Devang Rathod
me puedes mostrar como Dicen que escribir un código es como escribir un poema. Quiero mi código optimizado.
jhedm
10
codereview.stackexchange.com - es lo que está buscando
Alexander
1
Puede utilizar la validación de formularios HTML5:$('form')[0].checkValidity()
niutech
si el enfoque principal es la simplicidad, el plugin valijate jquery es prometedor. es un complemento de inicio. pero utiliza alguna forma interesante de validación. aquí está el enlace para su guía. valijate.com/Docs.php
bula

Respuestas:

300

Simplemente puede usar el complemento jQuery Validate de la siguiente manera.

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

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.jsarchivo :

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension
Sparky
fuente
18

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.

<script type="text/javascript">
$(document).ready(function(){
    $("#formID").validate({
    rules :{
        "data[User][name]" : {
            required : true
        }
    },
    messages :{
        "data[User][name]" : {
            required : 'Enter username'
        }
    }
    });
});
</script>

Puede ver que required : true hay muchas más propiedades como para el correo electrónico que puede definir email : true para el número number : true

Devang Rathod
fuente
3
El validador de jQuery es bueno, pero creo que un validador que tenga en cuenta las nuevas funciones de validación de HTML5 es aún mejor, por ejemplo, ericleads.com/h5validate .
Matt Browne
@MattB., Nunca he oído hablar de ese, pero el complemento jQuery Validate también tiene en cuenta las características de HTML5 , aunque no estoy seguro de por qué necesitarías / querrías usar ambos juntos.
Sparky
1
Devang, nojquery.form.js está obligado a utilizar el código que ha mostrado.
Sparky
@Sparky A menos que ya haya diseñado una estética particular que realmente le guste para los mensajes de validación, permitir que un navegador compatible con HTML5 muestre mensajes de validación de la forma predeterminada a menudo es más agradable, donde el complemento de validación solo se usa como un respaldo para mostrar mensajes de error en navegadores antiguos y para la lógica de validación, HTML5 no es compatible (sin Javascript adicional). Pero esta es tanto mi preferencia personal como cualquier otra cosa.
Matt Browne
1
@MattB., Por lo general, las personas que usan jQuery buscan la coherencia entre navegadores que obtiene al alejarse de las funciones del navegador que varían mucho de una marca a otra. También prefiero seguir con los complementos populares que tienen una gran base de soporte, y si el desarrollador también es parte del equipo jQuery , mucho mejor, en mi opinión.
Sparky