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!

If I am not wrong should not it be something like `return validateForm();` so that validation return is also taken into consideration. And have you tried debugging your JS through console (Item Inspector or something) — Durgesh Chaudhary, Feb 26 '14 at 14:35
I tried with the firebug console but doesn't report warnings or errors — warlove, Feb 26 '14 at 15:10

Kristian Barrett · Accepted Answer · 2014-02-26T15:43:01.047

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.

edited Feb 26 '14 at 15:43

answered Feb 26 '14 at 14:52

Kristian Barrett

3,574
2
26
40

I'm sorry but doesn't work. I can compile the fields or not... it sends the data anyway and I receive a mail. I think I tried all these kind of variants by now and I'm still stuck at this. :( – warlove Feb 26 '14 at 15:05
See this: http://jsfiddle.net/h5HZH/1/ This is working on jsfiddle. Let me know if that does not work for you. – Kristian Barrett Feb 26 '14 at 15:21
Also you should take a look at this for the email validation: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript?rq=1 Your approach is not the most bulletproof. – Kristian Barrett Feb 26 '14 at 15:43
thanks, I know it's not a bulletproof validation, was just to try the form. I'll work on a serious one later, after I see all is working. :P well... about your fiddle, it's ok and works like a charm... but in my server doesn't. There must be a problem eslewhere then :( – warlove Feb 26 '14 at 16:11
ook! it's working, it wasn't loading the jquery library as I saw from firebug. I loaded it locally and works! thank you for support :) – warlove Feb 26 '14 at 16:23
I am glad this solved your problem. If this is the answer you should mark it as so :) – Kristian Barrett Feb 26 '14 at 18:37

Simple mail send with attachment, sends despite validation

1 Answers1