Ich habe ein Formular und versuche, eine Validierung durchzuführen, um die erforderlichen Felder in älteren Browsern und Safari (!) Abzufangen. Die Lösung, die ich bisher habe, scheint fast zu funktionieren ... Wenn ich das Formular mit leeren Feldern in Safari sende, wird der Fehler angezeigt und das Formular wird trotzdem gesendet. Was mache ich falsch?

Mein Formular sieht folgendermaßen aus:

<form id="primaryPostForm" method="POST" >

<input type="text" name="iName" id="iID" maxlength="25" required="required" value="" />

<textarea class="tipContent requiredAttr" name="taName" id="taID" maxlength="150" required="required" ></textarea> 

<input type="hidden" name="submitted" id="submitted" value="true" />
<input id="submitBtn" type="submit" value="Submit">

Meine Validierung sieht folgendermaßen aus:

function validate(){
$('#primaryPostForm').submit(function(){
    $("#primaryPostForm .requiredAttr").each(function(){
        if($(this).val().length < 1){
        alert("Please make sure the fields are filled in - thanks");
        return false;}
    })//end each
})//end submit
}
1
Kev 30 Nov. 2013 im 17:59

3 Antworten

Beste Antwort

Das return false verlässt nur die each Schleife. Sie müssen ein Ergebnis speichern, das Sie von der Funktion zurückgeben können:

function validate(){
  $('#primaryPostForm').submit(function(){
    var result = true;
    $("#primaryPostForm .requiredAttr").each(function(){
        if($(this).val().length < 1){
        alert("Please make sure the fields are filled in - thanks");
        result = false;
        return false; // exit loop
      }
    })//end each
    return result;
  })//end submit
}
2
Guffa 30 Nov. 2013 im 14:05

Verwenden Sie zunächst e.preventDefault(); anstelle von return false.

Zur Beantwortung Ihrer Frage: return false muss im Bereich des Rückrufs eines Übermittlungsereignisses liegen:

function validate(){
    $('#primaryPostForm').submit(function(e){
        var ret = true;
        $("#primaryPostForm .requiredAttr").each(function(){
            if($(this).val().length < 1){
                alert("Please make sure the fields are filled in - thanks");
                ret = false;    
            }
        });
        if(!ret){
            e.preventDefault();
        }
    });
}

Ein prägnanterer und direkterer Weg, dies zu tun, wäre:

$('#primaryPostForm').submit(function(e){
    var required = $(".requiredAttr", this).filter(function(){
        return !this.value;
    });
    if(required.length){
        alert("Please make sure the fields are filled in - thanks");
        e.preventDefault();
    }
});
1
jplozano 30 Nov. 2013 im 14:12

Versuchen Sie dies unter MDN

function validate(){
$('#primaryPostForm').submit(function(){
    var result = [];
    $("#primaryPostForm .requiredAttr").each(function(){
        if($(this).val().length < 1){
        result.push(false);
        }
    })//end each
    result.some(function(element){return (element!=false)})
    alert("Please make sure the fields are filled in - thanks");
})//end submit
}
0
Tom Chung 30 Nov. 2013 im 14:06