Question

I am trying to validate my form using jquery but I cannot get it work. When I click on submit it doesn’t show any error message.

Could you please tell me where is the problem?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="validation.js"></script>

 <script>
 $(document).ready(function() { 
// validate signup form on keyup and submit 
var validator = $("#signupform").validate({ 
    rules: { 
        fname: "required", 
        lname: "required", 
        username: { 
            required: true, 
            minlength: 2, 
            remote: "<? echo base_url();?>mycontroller/function" }
       }, 
    messages: { 
        fname: "Enter your firstname", 
        lname: "Enter your lastname", 
        username: { 
            required: "Enter a username", 
            minlength: jQuery.format("Enter at least {0} characters"), 
            remote: jQuery.format("{0} is already in use") 
        }, 

    }, 



}); 

</script>

My FOrm

 <!--I am trying to show all the error message here --> 

<form id="signupform" autocomplete="off" method="get" action="">

 FName:
 <input id="fname" name="fname" type="text" value="" />
 Lname:
 <input id="lname" name="lname" type="text" value="" />
 username:
 <input id="username" name="username" type="text" value="" />   <br>      

 <input id="signupsubmit" name="signup" type="submit" value="Signup" />          
 </form>            

Answer 1

as i mentioned in the comments it working in the fiddle

make sure the scripts are loaded you can try using the cdn hosted version of jquery and validate.js

jquery cdn

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

validate.js cdn

http://ajax.aspnetcdn.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js

if it works with this it means that the scripts are not loaded and check your links

EDIT

$(":submit").click(function(e){

    if(!$(this).closest("form").valid()){
        e.preventDefault();
        var errText="";
        $(".error").each(function(i,j){
         errText+=$(j).text()+"<br/>";           
        });
        $("#errDiv").html(errText).css({color:'Red'});  

        }

});

http://jsfiddle.net/85DM4/17/

its not comma separated but i’m sure you will get the idea