Jquery validate submits invalid forms

Question

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.

This should be because of some error. When you submit the form and there is some error, the validation code fails and the form is submitted without being controlled by the jquery validate. — Mohit Bhardwaj, Jul 04 '16 at 14:55
^ To add to that, check the console for an error in your code — Rory McCrossan, Jul 04 '16 at 14:57
To check it in your error console you need to enable `persistent` option, because as soon as you will get the error message in console, the form submission would cause a page refresh. — Mohit Bhardwaj, Jul 04 '16 at 15:03
Thanks, i am gonna check the console with the persistent option. I am still a noob in this so it might take a while. — MarinoLautaro, Jul 04 '16 at 15:10

score 0 · Accepted Answer · answered Jul 04 '16 at 15:52

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>

Thank you so much!!! Dont worry about the spanish thing, you forgive my english. It works perfectly! — MarinoLautaro, Jul 04 '16 at 16:10
I have 1 more question if it is not to much, it would be the same to use the $(document).ready to load everything?? — MarinoLautaro, Jul 04 '16 at 16:11
You don't need to use that for the script libraries if they are placed in the header and load first. That is just a general jQuery convention to delay executing scripts until after the DOM is loaded. `$( document ).ready(function() {console.log( "ready!" );});` and `$(function() {console.log( "ready!" );});` are the same. — SScotti, Jul 04 '16 at 16:17
`lettersonly` and `phoneUS` are perfectly acceptable jQuery Validate rules as long as you include [the `additional-methods.js` file](https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js) just after jQuery Validate. — Sparky, Jul 05 '16 at 16:12

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

See this:

jQuery validate plugin : accept letters only?

regarding custom validator methods for you other issues.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 04 '16 at 15:55

SScotti

2,158
4
23
41

Or just use the `lettersonly` rule that's included in [the `additional-methods.js` file](https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js). – Sparky Jul 05 '16 at 16:14

Jquery validate submits invalid forms

JS

2 Answers2