Simple mail send with attachment, sends despite validation

Question

I'm new here and I'm not an expert of coding, I'm still learning, so be patient please. :)

I created a simple form that is supposed to send an e-mail with a CV attachment. I found the code for this job and it works as intended (sends the mail with file correctly). I didn't use phpmailer or similar, it's just the simple php mail function. I want a client side validation, javascript/jquery classic, and maybe a server side later. The point is that I can't prevent the form from being submitted to process the javascript validation. I guess it's because there is a file (I used the same form, without attachments, elsewhere and it works pretty well). I post the code so you can see what's wrong:

<form method="post" action="mail.php" id="uploadform" enctype="multipart/form-data">
    <p>Name :</p>
    <input name="name" id="name" type="text" />
    <p>E-mail :</p>
    <input name="email" id="email" type="text" />
    <p>Tel :</p>
    <input name="tel" id="tel" type="text" />  
    <p>Message :</p>
    <textarea name="mex" id="mex" rows="7" cols="10"></textarea>   
    <p>File Upload :</p>
    <input name="file" id="file" type="file">   
    <input type="submit" name="submit" id="submit" value="send" />
</form>

and this is the script:

<script type="text/javascript">
$(document).ready(function () {

    $('#uploadform').submit(function (){
        validateForm();
        return false;
    });

    function validateForm(){
            var name=document.forms["uploadform"]["name"].value;
        if(name==null || name=="") {
            $('#name').attr("placeholder","Who is writing?");
            return false;
        }

        var email=document.forms["uploadform"]["email"].value;
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
          $('#email').val("");
          $('#email').attr("placeholder", "Insert a valid e-mail address!");
          return false;
        }
    }

});
</script>

I still can't find why the script doesn't prevent the data from being submitted. It seems it ignores the javascript at all. I tried also with different methods, like onsubmit inline on the form tag, event.preventDefault(); and similar, but the behavior is the same. I'm getting crazy for this small issue. I'd be glad if someone could help/explain. Thanks!

Answer 1

You have wrapped your check inside the callback of the submit function.

You should do it like:

$(document).ready(function () {

    $('#submit').click(function (event){
        return validateForm();
    });

    function validateForm(){
        var name=document.forms["uploadform"]["name"].value;
        if(name==null || name=="") {
            $('#name').attr("placeholder","Who is writing?");
            return false;
        }

        var email=document.forms["uploadform"]["email"].value;
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
          $('#email').val("");
          $('#email').attr("placeholder", "Insert a valid e-mail address!");
          return false;
        }
        return true;
    }

});

Let me know if that works.