web-dev-qa-db-fra.com

Pourquoi jQuery Validation ajoute-t-il un attribut noValidate?

J'utilise actuellement:

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="../js/bootStrap/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

avec validation telle que:

j$('.delValidate').each(function(){

j$(this).validate({
    rules:{
        delivery_Method:{
            required: true
        }
    },
    message:{
        delivery_Method:{
            required: true
        }
    }
});

});

    j$('.validateUser').each(function(){
        j$(this).validate({
            rules:{
                f_Name:{
                    required: true
                },
                l_Name:{
                    required: true  
                },
                username:{
                    required: true,
                    minlength: 6
                },
                password: {
                    validChars: true,
                    noSpace: true,
                    minlength: 6,
                    skip_or_fill_minimum: [3,".pw"]
                },
                confPass: {
                    equalTo: "#password",
                    skip_or_fill_minimum: [3,".pw"]
                }           
            }
        });
    });

Extrait HTML:

<form class="form-horizontal delValidate" action="#" method="post">
<input type="hidden" name="formIdentifier" value="addDel" />
<div class="form-group">
    <div class="col-sm-3">
        <input type="text" name="delivery_Method" class="form-control" placeholder="Enter new method" />
    </div>
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit"  class="btn btn-default btn-block">Add</button>
    </div>
</div>
</form>

Mais quand je vais sur ma page, mon formulaire est rendu avec l'attribut noValidate et donc je peux insérer des valeurs nulles/vides dans la base de données. Quel en est le raisonnement? Le formulaire doit-il être configuré d'une manière particulière? La validation jQuery détecte-t-elle un problème et ne fonctionne donc pas? Mon sale boulot utilise:

j$(this).removeAttr('novalidate');
jqueryjquery-validate
34
Akira Dawson

L'attribut novalidate indique simplement au navigateur de désactiver la validation HTML5 intégrée ou d'ignorer tous les attributs de validation HTML5 que vous avez pu utiliser.

Le plugin jQuery Validate ajoute dynamiquement l'attribut novalidate car, en l'installant, vous avez décidé de laisser le plugin gérer la validation à la place de HTML5.

Aucune de ces deux méthodes, JavaScript (jQuery) ou HTML5, n'est suffisante pour protéger votre base de données. Vous devriez toujours avoir une sorte de validation côté serveur en place lorsque la validation côté client échoue, est désactivée ou ignorée par l'utilisateur/navigateur.

OP de citation:

"Mon formulaire est rendu avec l'attribut noValidate et je peux donc insérer des valeurs nulles/vides dans la base de données."

On dirait que quelque chose ne va pas avec la façon dont vous utilisez le plugin jQuery Validate, et l'attribut novalidate n'est pas la cause première.

S'il est essentiel que vous ne puissiez pas saisir de données null, vous aurez besoin d'un code de validation des données côté serveur pour éviter cela. Vous ne devez jamais vous fier au code côté client pour protéger la base de données car tout le code côté client peut être facilement contourné.

"Quel est le raisonnement pour cela?"

Comme expliqué ci-dessus. C'est normal et souhaité. Le plugin utilise simplement novalidate pour reprendre la validation côté client à partir du navigateur (HTML5).

Si vous n'avez pas d'attributs de validation HTML5, l'attribut novalidate, ou l'absence d'attribut novalidate, ne fait absolument rien. En d'autres termes, cela ne fait que basculer la validation HTML5 si vous utilisez des attributs de validation HTML5.

"Le formulaire doit-il être configuré d'une manière particulière?"

Oui. Mais nous ne pouvons pas voir votre balisage pour dire où vous vous êtes trompé.

"Mon sale boulot utilise: .removeAttr('novalidate')"

Ce n'est pas intelligent ou complètement superflu, selon votre balisage. En effet, vous autorisez potentiellement la validation HTML5 à se produire simultanément avec le plug-in jQuery Validate. Choisissez l'un ou l'autre pour la validation côté client.

[~ # ~] éditez [~ # ~] :

L'OP a depuis ajouté un balisage HTML à la question.

Le plugin jQuery Validate fonctionne exactement comme prévu: http://jsfiddle.net/tv7Bz/

74
Sparky