MarinoLautaro MarinoLautaro - 5 months ago 22
Javascript Question

Jquery validate submits invalid forms

i´m trying to create a basic validation of my HTML form, i´m using Jquery Valate to achieve this. My main problem is that the form is submitted even when some of the fields are still invalid. My second problem is that the custom message that i want to show aren´t appearing. Here is my 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"
}
}
});


Thanks in advance.

Answer

I think that this will work. You need to make sure that the DOM is loaded before executing your script, wrapped with:

$(function() { . . . });

and, I don't think that the validate plug-in supports:

lettersonly: true digits: true phoneUS: true

You'll have to look into that. Anyways, this seems to work:

<!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>