HTML5 Formular Validierung macht Probleme

xorg1990 · 06. März 2016

Hi, ich wollte mir mal die HTML5 Formular Validierung zu nutze machen, stoße da aber auf ein paar Probleme.

Das Problem besteht darin das die Validierung nur durch ein Submit getriggert wird, ein Butten von Type butten löst keine Validierung aus.

Wiederum führt der submit Befehl ein page reload aus das darf aber nicht passieren, da ich die Formulare über JQuery ein und ausblende.

Code:

  $('#ChangeMailBtn').click(function(){
        	  if(document.getElementById("#changeMail").checkValidity()===true){
                $.ajax({
                        type: "POST",
                        url: "/changeMail",
                        data: $("#changeMail").serialize(),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(response) {
                            alert(response.success);
                        }
                });
                return false;
            }else{
                return false;
            }
        });

HTML:

<form action="" id="changeMail" style='margin-left:40%; display: none;'>
            <p style="margin: 0, auto;">Please enter your new Email Address:<br>
             <input name="mail" type="email" placeholder="name@example.com"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" value="" required/><br>
            </p>
            <p>
            repeat E-Mail: <br>
           <input name="mail2" type="email" placeholder="name@example.com"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" value="" required/><br>
            </p>
             <input id="ChangeMailBtn" type='submit' style='background:red;width:145px;' value="change E-Mail" />
        </form>

Die Idee mit jquery .serialize() stammt von stackoverflow
javascript - Submit form without reloading page - Stack Overflow

Funktioniert aber nicht, Seite wird Trotzdem neu geladen.

Auch komisch ist, dass die Daten schon gesendet werden obwohl die Validierung noch gar nicht abgeschlossen ist nur durch if(document.getElementById("#changeMail").checkValidity()===true){
konnte ich mir helfen.

Gibt es den keine Möglichkeit die HTML5 Form Validierung zu nutzen ohne das sich die Seite neu lädt?

mikdoe · 07. März 2016

bei "submit" wurde doch schon immer neu geladen. wo ist das return false in deiner <form>?
und serialize ist eine möglichkeit, mir gefällt https://developer.mozilla.org/de/docs/Web/API/FormData besser.

xorg1990 · 07. März 2016

mikdoe schrieb:
bei "submit" wurde doch schon immer neu geladen.

Schon klar aber das darf nicht passieren, da ich mir div's via jquery ein und aus blende. Bei einem neulanden ist dann ja alles reseted.

Bis jetzt habe ich via <button type="button"> den reload verhindert aber die Formular Validierung wird nicht gefeuert.

mikdoe schrieb:
wo ist das return false in deiner <form>?

Wo soll den das hin?
Das retun false steht doch oben in meiner Jquery Funktion.

mikdoe schrieb:
mir gefällt https://developer.mozilla.org/de/docs/Web/API/FormData besser.

Ist mir neu.

- - - Aktualisiert - - -

Hab's nun so gelöst, die jquery Click events habe ich entfernt und durch JS Funktion ersetzt.
Der Funktionsaufruf geschieht im action Attribut.
action="javascript:changeMail()"
Aber warum ist diese Schreibweise kaum anzufinden?

kkapsner · 11. März 2016

xorg1990 schrieb:
dass die Daten schon gesendet werden obwohl die Validierung noch gar nicht abgeschlossen ist

Das kann nicht sein. In welchem Browser hast du denn dieses Verhalten gesehen?

xorg1990 schrieb:
Hab's nun so gelöst, die jquery Click events habe ich entfernt und durch JS Funktion ersetzt.

Du hättest einfach deine Click- in Submit-Listener auf dem <form> ändern müssen.

xorg1990 schrieb:
Aber warum ist diese Schreibweise kaum anzufinden?

Wahrscheinlich weil sie unschön und unflexibel ist. Wenn du dort das das ev.preventDefault() (oder return false) machst, wird auch das Absenden verhindert. Das meinte mikdoe.

xorg1990 · 11. März 2016

kkapsner schrieb:
Das kann nicht sein. In welchem Browser hast du denn dieses Verhalten gesehen?

Chrome unter Ubuntu. Wird aber in allen Browsern so sein.

Hier ein Demo Skript:

Code:

<!DOCTYPE html>
<head>
    <title>Profile</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    function ready() {
	  $('#ChangeMailBtn').click(function(){
		alert($("#changeMail").serialize())
                $.ajax({
                        type: "POST",
                        url: "/changeMail",
                        data: $("#changeMail").serialize(),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(response) {
                            alert(response.success);
                        }
                });
                return false;
        });
}
</script>
</head>

<body onload=ready()>
 
<form action="" id="changeMail">
            <p style="margin: 0, auto;">Please enter your new Email Address:<br>
             <input name="mail" type="email" placeholder="name@example.com"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" value="" required/><br>
            </p>
            <p>
            repeat E-Mail: <br>
           <input name="mail2" type="email" placeholder="name@example.com"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" value="" required/><br>
            </p>
             <input id="ChangeMailBtn" type='submit' style='background:red;width:145px;' value="change E-Mail" />
        </form>
</body>    
    </html>

Der Alert kommt aber Validiert wird nix. Liegt wahrscheinlich daran das der Submit an Jquery click gebunden ist.

Es gibt ja noch onsubmit, das habe ich noch gar nicht ausprobiert.

kkapsner schrieb:
Wahrscheinlich weil sie unschön und unflexibel ist.

Wenn das alle gründe sind. Mir ist das egal ob schön oder nicht schön funktionieren muss es.

kkapsner schrieb:
Wenn du dort das das ev.preventDefault() (oder return false) machst,

preventDefault() hatte ich schon probiert, da passierte gar nix mehr.

kkapsner · 11. März 2016

xorg1990 schrieb:
Der Alert kommt aber Validiert wird nix.

Das ist klar. Das Click-Event wird ja immer ausgeführt - es ist einfach das falsche Event:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<form id="form">
	<input name="name" placeholder="name" required>
	<button>absenden</button>
</form>
<script type="text/javascript">
document.getElementById("form").addEventListener("submit", function(ev){
	ev.preventDefault();
	
	var data = new FormData(this);
	alert(data.get("name"));
}, false);

</script>
</body>
</html>

- das funktioniert, ist schön, flexibel und wartbar.

HTML5 Formular Validierung macht Probleme

xorg1990

New member

mikdoe

Moderator

xorg1990

New member

kkapsner

Super Moderator

xorg1990

New member

kkapsner

Super Moderator