I am new to usage of jquery.I want to show a confirmation facebox while all my input requirements are true.ie when my form fields are validated a simple facebox should appear showing the forms are validated.How can i do it.Itried a lot.But i didnt get the source for facebox.I didnt get the source(src) file from nowhere.Any one please help me in solving.My code is as follows:

   <head>
   <script type="text/javascript" src="jquery-1.4.min.js"></script> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
  <script type="text/javascript" src="jquery.validate.js"></script>
      <link href="../src/facebox.css" media="screen" rel="stylesheet" type="text/css" />



<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate({
rules:{
name:{
required:true
},
password:{
required:true
},
age: {
required: true,
range: [17, 30]
}
}

          });
      });
      jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox({
    loadingImage : '../src/loading.gif',
    closeImage   : '../src/closelabel.png'
  })
})
  </script>
Member Avatar for diafol

why is this php

The facebox plugin script is not included.

Also, remove line 2 and keep only the latest jQuery version. Including two usually works, but is rather pointless.

I checked the link.But it doesnt seems to work in my code.

Did you download the script ?

yeah I downloaded it.But its not showing up.I put correct format for src also.I rewrite the code and i got everytime unsuccessful in facebox.The code is as follows:

<link href="../src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

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

// $("#login").click(function(){
// var action=$("#form1").attr('action');
// var dat={
// name:$("#name").val(),
// password:$("#password").val(),
// age:$("#age").val(),
// is_ajax:1
// };
$("#form1").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
password: {// compound rule
required: true

        }, 
          age: {
  required: true,
  range: [17, 30]
}
 } 


      });         
    });

// });
</script>

You still haven't included the script in your code, only the CSS.

This is validation of name,age,password in jquery

the facebox code is as below:

<script type="text/javascript">     
  function example_login_facebox() {

  $.facebox(function() {   
    $.ajax({

      data: { 'name' : $('#name').val(), 'password' : $('#password').val(),'age' : $('#age').val(), is_ajax:1 },

        type: "post",

        url: "val1.php",
        error: function() {

            $.facebox('There was an error when attempting to log you in. Please try again shortly.');

        },

        success: function(data) 
        {

       $.facebox("success");     

if(data=='success')

                          $("#form1").slideUp('fast',function(){
                                 $("#message").html("<p class='success'>logged in successfully</p>");
                             });
                             else
                              $.facebox("Unsuccessful");
                             $("#message").html("<p class='error'>invalid details</p>");
                            $("#message").show();
                         }

    });



});
}



   </script>

I meant that this is missing:

<script type="text/javascript" src="facebox.js"></script>

NO it doesn't work

Is your page online for viewing? Since you're not giving the whole code, it's hard to guess the error.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.