jquery form validation is not workng

Question

i try to learn basics of jquery so i start build my own validation of jquery.i tried to build jquery form validation but it not working.i don't know what the fault.if any one have idea please try to help to learn jquery in a better way.my code is here:-

<script src="jquery.min.js" type="text/javascript"></script>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
    $('#submit').click(function(){
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if($('#fname').val()){
            if($('#fname').val()==""){
                $('#err_msg_1').html('fname field is empty');
                return false;
            }else{
                if($('#fname').val().length>=4){
                    $('#err_msg_1').html('letter length is to sort');
                return false;
                }
            }
        }
        if($('#fname').val()){
            if($('#lname').val()==""){
                $('#err_msg_2').html('lname field is empty');
                return false;
            }else{
                if($('#lname').val().length>=4){
                $('#err_msg_2').html('letter length is to sort');
                return false;
            }
        }
        /*if($('.gender').val()==""){*/
            if($('.gender')[0].selectedIndex<=0){
            $('#err_msg_3').html('gender field is empty');
            return false;
        }
        if(filter.test(a)==false){
            //email.addClass("error");
        $('#err_msg_email').html("Type a valid e-mail please");
        //emailInfo.addClass("error");
            return false;
        }



    });return true;
});

</script>

<div class="form">
    <form name="form" methode="POST" action="">
    <div class="container"><div class="fieldname">First Name</div><div class="field"><input name="fname" type="text" id="fname"></div><div class="error" id="err_msg_1"></div></div>
    <div class="container"><div class="fieldname">Last Name</div><div class="field"><input name="fname" type="text" id="lname"></div><div class="error" id="err_msg_2"></div></div>
    <div class="container"><div class="fieldname">Gender</div><div class="field">
    <select name="gender" class="gender" >
        <option value="">---select gender---</option>
        <option value="male">male</option>
        <option value="female">female</option>
    </select>    
    </div><div class="error" id="err_msg_3"></div></div>
    <div class="container"><div class="fieldname">Email</div><div class="field"><input name="email" type="text" id="email"></div><div class="error" id="err_msg_email"></div></div>
    <div class=""><input name="submit" type="submit" id="submit"></div>
    <div id="check"><div>
    </form>
</div> 

Answer 1

There was an syntactical error and many logical errors

$(document).ready(function(){
    $('#submit').click(function(){
        if(!$('#fname').val()){
            $('#err_msg_1').html('fname field is empty').show();
            return false;
        }else{
            if($('#fname').val().length <= 4){
                $('#err_msg_1').html('letter length is to sort').show();
                return false;
            }
        }
        $('#err_msg_1').hide();

        if(!$('#lname').val()){
            $('#err_msg_2').html('lname field is empty').show();
            return false;
        }else{
            if($('#lname').val().length<=4){
                $('#err_msg_2').html('letter length is to sort').show();
                return false;
            }
        }
        $('#err_msg_2').hide();

        /*if($('.gender').val()==""){*/
        if(!$('.gender').val()){
            $('#err_msg_3').html('gender field is empty').show();
            return false;
        }
        $('#err_msg_3').hide();

        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(!filter.test(a)){
            console.log('asdf')
            $('#err_msg_email').html("Type a valid e-mail please").show();
            return false;
        }
        $('#err_msg_email').hide();
    });
    return true;
});

Demo: Fiddle