return false doesn't prevent form submission

Question

I have a form and I am trying to run some validation on it to catch required fields on older browsers and Safari(!). The solution I have so far seems to almost work... When I submit the form with empty fields on Safari the error pops up, and then the form is submitted anyway. What am I doing wrong?

My form looks like this:

<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">

My validation looks like this:

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
}

Answer 1

The return false only exits from the each loop. You need to store a result that you can return from the function:

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
}

Answer 2

First off, use e.preventDefault(); instead of return false .

To answer your question: return false must be in the scope of the submit event callback:

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();
        }
    });
}

A more concise and direct way to do this would be:

$('#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();
    }
});

Answer 3

Try this, refer to 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
}