Warum fügt jQuery Validation das noValidate-Attribut hinzu?

Lesezeit: 4 Minuten

Benutzer-Avatar
Akira Dawson

Ich verwende derzeit:

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://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>

mit Validierung wie:

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"]
                }           
            }
        });
    });

HTML-Schnipsel:

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

Aber wenn ich auf meine Seite gehe, wird mein Formular mit dem Attribut noValidate gerendert und daher kann ich null/leere Werte in die Datenbank einfügen. Was ist die Begründung dafür? Muss das Formular auf eine bestimmte Weise eingerichtet werden? Erkennt die jQuery-Validierung, dass etwas nicht stimmt und daher nicht funktioniert? Meine Drecksarbeit ist die Verwendung von:

j$(this).removeAttr('novalidate');

  • Dein Code funktioniert einwandfrei: jsfiddle.net/tv7Bz

    – Funkelnd

    21. März 2014 um 15:20 Uhr

Benutzer-Avatar
Funkelnd

Das novalidate Das Attribut weist den Browser einfach an, die integrierte HTML5-Validierung zu deaktivieren oder alle HTML5-Validierungsattribute zu ignorieren, die Sie möglicherweise verwendet haben.

Das jQuery Validate-Plug-in fügt dynamisch die novalidate -Attribut, da Sie sich durch die Installation dafür entschieden haben, das Plugin die Validierung durchführen zu lassen stattdessen von HTML5.

Keine dieser beiden Methoden, JavaScript (jQuery) oder HTML5, ist gut genug, um Ihre Datenbank zu schützen. Sie sollten immer eine Art serverseitige Validierung für den Fall haben, dass die clientseitige Validierung fehlschlägt, deaktiviert oder vom Benutzer/Browser umgangen wird.

Zitat OP:

“Mein Formular wird mit dem Attribut noValidate gerendert und daher kann ich null/leere Werte in die Datenbank einfügen.”

Klingt so, als ob etwas mit der Art und Weise, wie Sie das jQuery Validate-Plug-in verwenden, sehr falsch ist, und die novalidate Attribut ist nicht die eigentliche Ursache.

Wenn es kritisch ist, dass Sie nicht eintreten können null Daten benötigen Sie einen Datenüberprüfungscode auf der Serverseite, um dies zu verhindern. Sie dürfen sich zum Schutz der Datenbank niemals auf clientseitigen Code verlassen, da der gesamte clientseitige Code einfach umgangen werden kann.

“Was ist die Begründung dafür?”

Wie oben erklärt. Das ist normal und gewollt. Das Plugin verwendet einfach novalidate um die clientseitige Validierung vom Browser (HTML5) zu übernehmen.

Wenn Sie keine HTML5-Validierungsattribute haben, dann die novalidate Attribut oder Mangel an novalidate Attribut, tut absolut nichts. Mit anderen Worten, es schaltet nur die HTML5-Validierung um wenn Sie HTML5-Validierungsattribute verwenden.

„Muss das Formular auf eine bestimmte Weise aufgebaut werden?“

Ja. Aber wir können Ihr Markup nicht sehen, um festzustellen, wo Sie einen Fehler gemacht haben.

“Meine Drecksarbeit ist die Verwendung von: .removeAttr('novalidate')

Das ist nicht schlau oder völlig überflüssig, je nach Markup. Tatsächlich erlauben Sie möglicherweise, dass die HTML5-Validierung gleichzeitig mit dem jQuery Validate-Plug-in erfolgt. Wählen Sie das eine oder andere für die clientseitige Validierung aus.


BEARBEITEN:

Das OP hat der Frage seitdem HTML-Markup hinzugefügt.

Das jQuery Validate-Plugin funktioniert genau wie erwartet: http://jsfiddle.net/tv7Bz/

  • Tolle Erklärung @Sparky. Ich habe meine Frage bearbeitet und etwas HTML eingefügt, das noValidate macht für mich jetzt viel mehr Sinn! Ich habe andere Beiträge durchsucht, konnte aber keine detaillierte Erklärung wie diese finden. Achtung, ich habe eine serverseitige Validierung eingerichtet.

    – Akira Dawson

    21. März 2014 um 3:54 Uhr


  • @AkiraDawson, ich habe deinen Code in a eingefügt jsFiddle und es funktioniert gut. Es muss noch etwas anderes geben, das Sie uns nicht zeigen.

    – Funkelnd

    21. März 2014 um 15:23 Uhr

1246200cookie-checkWarum fügt jQuery Validation das noValidate-Attribut hinzu?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy