Manuelles Auslösen der Formularvalidierung mit jQuery

Question

Ich habe ein Formular mit mehreren verschiedenen Feldsets. Ich habe jQuery, das den Benutzern die Feldsätze nacheinander anzeigt. Für Browser, die die HTML5-Validierung unterstützen, würde ich gerne davon Gebrauch machen. Allerdings muss ich es unter meinen Bedingungen tun. Ich benutze JQuery.

Wenn ein Benutzer auf einen JS-Link klickt, um zum nächsten Feldset zu wechseln, muss die Validierung auf dem aktuellen Feldset erfolgen und den Benutzer daran hindern, vorwärts zu gehen, wenn es Probleme gibt.

Idealerweise erfolgt die Validierung, wenn der Benutzer den Fokus von einem Element verliert.

Derzeit habe ich novalidate aktiviert und verwende jQuery. Würde lieber die native Methode verwenden. :)

Answer 1

Ich scheine den Trick zu finden: Entfernen Sie einfach das target Attribut des Formulars, verwenden Sie dann eine Schaltfläche zum Absenden, um das Formular zu validieren und Hinweise anzuzeigen, überprüfen Sie, ob das Formular über JavaScript gültig ist, und senden Sie dann alles, was folgt. Der folgende Code funktioniert für mich:

  Absenden

---

$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('gültig!');
    // etwas senden..
  } else
    console.log('nicht gültig!');
});

Answer 2

Html-Code:

....
submit

Javascript (Verwendung von Jquery):

$(document).on('submit','.validateDontSubmit',function (e) {
    //Verhindert das Absenden des Formulars
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// Verwendung eines außerhalb befindlichen Buttons, um Klick auszulösen
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});

Ich hoffe, das hilft Ihnen weiter

Answer 3

Für Eingabefeld

$('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Bitte geben Sie eine gültige Telefonnummer ein');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

Answer 4

Wenn es einen sehr komplexen (insbesondere asynchronen) Validierungsprozess gibt, gibt es einen einfachen Workaround:

...

function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}

Answer 5

Ein weiterer Weg, dieses Problem zu lösen:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});