HTML5 Formular-Validierung für AJAX-submit-button

Ich habe das folgende Formular aus. Ich mag das neue HTML5 Formular-Validierung, und ich würde es vorziehen, es zu halten. Aber. Ich mag nicht die Weise, dass, wenn der Knopf gedrückt wird, es aktualisiert die Seite (Formular Absenden).

Stattdessen würde ich lieber verwenden Sie die Taste, um die trigger einige AJAX zu aktualisieren Elemente der Seite ohne Aktualisierung der gesamten Seite. Allerdings, wenn ich type="button" was passiert, ist, dass die HTML5-Formular-Validierung nicht mehr ausgelöst, wenn die Taste gedrückt wird.

Wie kann ich mit HTML5 Formular-Validierung, die zwar nicht auslösen Ausbreitung von erfrischend/Absenden der Seite?

Beachten Sie, dass ich bin nicht besorgt, mit der AJAX-Elemente, die von diesem problem, nur die HTML5-Validierung Problem.

echo "<form>";
echo "<td><input id=\"link_add_title\" type=\"text\" class=\"form-control\" placeholder=\"URL Title\"></td>";
echo "<td><input id=\"link_add_url\" type=\"url\" class=\"form-control\" placeholder=\"Your URL\"></td>";
echo "<td><input id=\"link_add_budget\" type=\"number\" step=\"any\" class=\"form-control\" placeholder=\"Budget\"></td>";
echo "<td><button class=\"btn btn-sm btn-success\"><i class=\"fa fa-check\"></i> Add</button></td>";
echo "</form>";
HTML5 Validierung nicht neu laden die Seite in meinem browser ?
Ich bin mit chrome. Weiß nicht, wie andere Browser implementiert das HTML5-standards, aber wenn es nicht funktioniert auf chrome, ich habe ein bisschen ein problem 🙂
Können Sie uns eine JSFiddle zeigen Sie Ihre form?
Gut, versuche reichen in dieser Turnschuh, es gibt kein page-reload, wenn die überprüfung in tritt -> jsfiddle.net/Qv2c2/1
Ich sicherlich nicht bekommen, wenn Sie versuchen zu vermeiden, das Formular Absenden, wenn die form tatsächlich gültig sind, benutzen Sie einfach preventDefault in form submit handler ?

InformationsquelleAutor Amy Neville | 2013-11-16

  1. 12

    Diese Weise verhindern Sie, dass die tatsächlichen vorlegen, aber die HTML5-Validierung löst:

    $('form').submit(function(event){

  event.preventDefault();

});

    Als Samveen Punkte heraus, auf diese Weise sollte bevorzugt über das hören der onclick Veranstaltung der <button>/<input type="submit"> element, denn letzteres würde verhindern, dass HTML5-Validierung zusätzlich zu den normalen Formular-submit - siehe Geige.

    Das funktioniert, danke! Natürlich werde ich verbessern die Selektoren aber so dass es nicht für alle Formen 🙂
    vielen Dank für diese Antwort! ich werde verrückt über jquery, Ajax, html5 Formular-Validierung nicht auslösen beim Absenden, aber auslösen, nachdem das Formular abgesendet wurde.
    Ein kleiner Nachtrag: Die üblichen Paradigma zu tun, die die Formulardaten auf die Schaltfläche click-Ereignis: $('button').click(function(evt){\*AJAX*\}); was sich ändern muss, um die oben erwähnten Formulars mit dem submit-Ereignis: $('form').submit(function(event){\*AJAX*\}); in Verbindung mit der änderung der button-Typ zurück type="submit"
    mit $(...).click(), verhindern Sie, dass HTML5-Validierung geschieht. Also bitte hören Sie auf submit nur : ))
    Was du sagst ist genau das, was ich gestern entdeckt (das problem, dass führen mich zu dieser Antwort). Alle meine Formular code falsch hört $('button').click(), diese unselige Paradigma zu sein, was ich gelernt habe aus der Suche bei Google und SE(siehe andere Antwort). So mein Kommentar darauf hinweisen, das gotcha mich.

    InformationsquelleAutor moonwave99

  2. 0

    Mit einem submit-button versuchen..

    html
<input type="submit" class="your-button-class" />

js
$(document).on('click','.your-button-class',function(){
 //your code

 return false;  //this will prevent the page refresh
});
    Dies scheint zu stoppen, die Ausbreitung der form, aber es hält auch die HTML5-Validierung
    Ich denke, dies ist eine browser-spezifische Lösung 🙂

    InformationsquelleAutor Achilles

Schreibe einen Kommentar