Formularvalidierung bei Senden und bei Fokus

Question

Ich habe eine Funktion, die meine Eingaben für das Fokus-Out-Ereignis validiert, aber wenn ich das Formular absende, muss ich das Formular erneut validieren, wie kann ich das tun? wenn ich versuche, dies:

$("#formcontato").submit(function(event){ 
     event.preventDefault(); 
     if (validar()){ 
      $.ajax({ 
       blablablabla 
      }); 
     } 
    }); 

Er wirft dass input ist undefined Ich brauche das Formular auf dem einreichen Ereignisse validade dass der Benutzer kann direkt auf dem Submit-Button klicken, werden auf diese Weise, die Funktion, die die Formularvalidierung isn machen nicht ausgeführt.

function validar(input) { 
var valido = false; 
    if(input.attr("id") === "email"){ 
     var filtro = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/; 
     if(filtro.test(input.val())){ 
      input.css("border-color", "green"); 
     } else { 
      input.css("border-color", "red"); 
      valido = false; 
     } 
    } 
    else if (input.val()===""){ 
    input.css("border-color", "red"); 
    valido = false; 
    } 
    else if (input.val()!="") { 
    input.css("border-color", "green"); 
    } 

    return valido; 
} 

$("input[type='text'],textarea").focusout(function() { 
    validar($(this)) 
}); 

Answer 1

Es scheint, dass Ihre validar Funktion eine jQuery Sammlung an, die für Eingabefeld als Argument enthält. Eine Möglichkeit, diese Basis zu erreichen, auf dem Code Ihr Versuch, so etwas wie dies sein könnte:

$("#formcontato").submit(function(event){ 
     var input = $(this).find("input[type='text'], textarea"); 
     event.preventDefault(); 
     if (validar(input)){ 
      $.ajax({ 
       blablablabla 
      }); 
     } 
    }); 

Eine weitere einfache Möglichkeit, Ihr Endziel zu erreichen, ist auf die Schaltfläche standardmäßig einreichen zu deaktivieren. Zum Beispiel:

<input type="submit" class="btn" value="My Input Submit" disabled/> 

Sie können dann ändern Sie Ihre validar Funktion true für valido zurückzukehren, falls die Eingabe gültig ist. Auf diese Weise können Sie den Rückgabewert verwenden, um zu bestimmen, ob die Übergabeschaltfläche aktiviert werden soll. Zum Beispiel:

function validar(input) { 
    var valido = true; // lets assume its valid to start with 
    if(input.attr("id") === "email"){ 
     var filtro = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/; 
     if(filtro.test(input.val())){ 
      input.css('border-color', 'green'); 
     } else { 
      input.css('border-color', 'red'); 
      valido = false; 
     } 
    } 
    else if (input.val()===''){ 
    input.css('border-color', 'red'); 
    valido = false; 
    } 
    else if (input.val()!='') { 
    input.css('border-color', 'green'); 
    } 

    return valido; 
} 

Sie dann die Verwendung den Rückgabewert in Ihren focusout Event-Handler die Schaltfläche aktivieren, wenn das Formular gültig ist wie so verwenden kann:

$('input[type="text"],textarea').focusout(function() { 
    var isValid = validar($(this)); 
    if (isValid) { 
    $('#formcontato').find('input[type="submit"]').prop('disabled', false); 
    } 
});