Submit-Ereignis unterdrücken/Submit-Schaltfläche nur aktiviert, wenn JavaScript deaktiviert ist

Question

Ich habe eine clientseitige JavaScript-Validierung für ein Formular. Es funktioniert großartig. Aber ich möchte Benutzer unterbringen, die JavaScript deaktiviert haben. Meine Validierung wird nicht vom Attribut onsubmit des Formulars ausgeführt. Es handelt sich um einen Ereignishandler, der an eine normale Schaltfläche im Formular gebunden ist. So ist der Knopf, der die Validierung schlägt und einreichen aus ist nicht wirklich eine einreichen, es ist nur type = „button“:

<input type="button" value="Ok" class="okbtn"> 

Dann melde ich mich an einen Event-Handler zu seinem Click-Ereignis, das meine Validierung der Fall ist. Sie macht geltend, wenn alles passiert:

function clickHandler(event){ 
    thisForm = event.data.caller 
    var valid = submitValidation(thisForm); 
    if (valid == true){ 
     thisForm.submit(); 
    } else{ 
     } 
} 

Mein Problem ist, wenn der Benutzer JS deaktiviert ist, gibt es keine Möglichkeit das Formular abzuschicken. Ich könnte die Schaltfläche type="submit" machen, die für die JS-deaktivierten Benutzer funktionieren würde, aber dann wird es immer das Formular senden und die Validierung für die JS-aktivierten Benutzer umgehen. (Die Validierung wird ausgeführt, wird jedoch trotzdem gesendet). Wenn ich die Schaltfläche type="submit" mache, kann ich das Submit-Ereignis blockieren, wenn es angeklickt wird? Ich benutze JQuery, kann JQuery das Senden unterdrücken? Ich möchte, dass meine Validierung prüft, ob sie übermittelt wird.

Answer 1

Sie unterdrücken können Klicks einreichen, indem wie etwas zu tun:

$('input[type=submit]').bind('click', function(e) { 
    e.preventDefault() // prevents the form from being submitted 
    clickHandler(); // the custom submit action 
}); 

Oder Sie können die tatsächliche Form wie folgt einreichen unterdrücken:

$('form').bind('submit', function(e) { 
    e.preventDefault(); 
    // etc 
}); 

Answer 2

Sie können das Senden unterdrücken, indem Sie den Handler onssubmit im Element form festlegen. Wenn die Validierung fehlschlägt, geben Sie false zurück.

Sie würden also true zurückgeben, wenn die Validierung erfolgreich war, oder false, wenn es fehlgeschlagen ist, anstatt thisForm.submit() aufzurufen.

Answer 3

Ändern Sie die Taste, um einen normalen Submit-Button und binden die Validierungsprüfung an das Ereignis submit() im Formular.

$("form").submit(function() { 
    if (!submitValidation()) { 
    return false; 
    } 
}); 

Aus der Dokumentation:

Das submit Ereignis wird an ein Element gesendet, wenn der Benutzer zu versucht, eine Form einreichen. Es kann nur an Elemente angefügt werden. Formulare können eingereicht werden entweder durch Anklicken eines explizite <input type="submit">, <input type="image"> oder <button type="submit"> oder durch Drücken der Eingabetaste , wenn bestimmte Form Element konzentrieren.