Validate first and the carry on

[James W-2]

I am using some jquery code to validate a form and then post the
results of the form via an ajax request to a script. I am struggling
with the code as when I click submit the form validates but then also
makes the ajax request. What I would like to be able to do is validate
the form and then if the form checks out ok then I would like the
other code to run.

I am using the plug in

http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js

I am new to jquery, I understand the validation how how to validate a
form using the plug in, and I am comfortable with the ajax request and
how to show and hide layers. I am in the tricky place where I cant get
the two to work together!

<script language="javascript">
$(document).ready(function()
{

  $("#login_form").validate({
  rules: {
    namea: "required",

    town: "required",

    emaila: {
      required: true,
      email: true
    }



  }

});


  $("#login_form").submit(function()
 {
  $.post("login.php",{ name:$('#namea').val(),password:$
('#password').val(),rand:Math.random() } ,function(data)
        {
    if(data=='OK')
    {
       $('#loginbox').hide();
        $('#ajax_failed').hide();
   $('#ajax_show').show();
   $('#RegisterForm').show();

    }
    else
    {
 $('#name').val("");
      $('#ajax_failed').show();
          }

        });
   return false;
 });
 $("#password").blur(function()
 {
  $("#login_form").trigger('submit');
 });
});
</script>

If anyone could point me in the right direction or show me how to
achieve this I would be most grateful.

JW

[Jörn Zaefferer-2]

Take a look at the ajaxSubmit demo:
http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

Instead of binding your own submit handler (which the plugin already
does), use the submitHandler-option.

Jörn

On Thu, Jul 2, 2009 at 3:54 AM, James W<projects@...> wrote:

>
> I am using some jquery code to validate a form and then post the
> results of the form via an ajax request to a script. I am struggling
> with the code as when I click submit the form validates but then also
> makes the ajax request. What I would like to be able to do is validate
> the form and then if the form checks out ok then I would like the
> other code to run.
>
> I am using the plug in
>
> http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js
>
> I am new to jquery, I understand the validation how how to validate a
> form using the plug in, and I am comfortable with the ajax request and
> how to show and hide layers. I am in the tricky place where I cant get
> the two to work together!
>
> <script language="javascript">
> $(document).ready(function()
> {
>
>  $("#login_form").validate({
>  rules: {
>    namea: "required",
>
>    town: "required",
>
>    emaila: {
>      required: true,
>      email: true
>    }
>
>
>
>  }
>
> });
>
>
>  $("#login_form").submit(function()
>  {
>  $.post("login.php",{ name:$('#namea').val(),password:$
> ('#password').val(),rand:Math.random() } ,function(data)
>        {
>    if(data=='OK')
>    {
>       $('#loginbox').hide();
>        $('#ajax_failed').hide();
>   $('#ajax_show').show();
>   $('#RegisterForm').show();
>
>    }
>    else
>    {
>  $('#name').val("");
>      $('#ajax_failed').show();
>          }
>
>        });
>   return false;
>  });
>  $("#password").blur(function()
>  {
>  $("#login_form").trigger('submit');
>  });
> });
> </script>
>
> If anyone could point me in the right direction or show me how to
> achieve this I would be most grateful.
>
> JW
>

[James W-2]

Jörn,

Thanks for your help, you pointed me in the right direction and I
managed to get it working.

I used this code:

<script language="javascript">
jQuery(function() {
                var v = jQuery("#login_form").validate({
                        submitHandler: function(form) {
                                 $.post("login.asp",{ name:$('#namea').val(),password:$
('#password').val(),rand:Math.random() } ,function(data)
        {
    if(data=='OK')
    {
       $('#loginbox').hide();
        $('#ajax_failed').hide();
   $('#ajax_show').show();
   $('#RegisterForm').show();

    }
    else
    {
 $('#name').val("");
      $('#ajax_failed').show();
          }

        });
   return false; //not to post the  form physically
                        }
                });
        });
</script>

Best Regards

James Webster


On Jul 2, 2:00 am, Jörn Zaefferer <joern.zaeffe...@...>
wrote:

> Take a look at the ajaxSubmit demo:http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-de...
>
> Instead of binding your own submit handler (which the plugin already
> does), use the submitHandler-option.
>
> Jörn
>
>
>
> On Thu, Jul 2, 2009 at 3:54 AM,JamesW<proje...@...> wrote:
>
> > I am using some jquery code to validate a form and then post the
> > results of the form via an ajax request to a script. I am struggling
> > with the code as when I click submit the form validates but then also
> > makes the ajax request. What I would like to be able to do is validate
> > the form and then if the form checks out ok then I would like the
> > other code to run.
>
> > I am using the plug in
>
> >http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js
>
> > I am new to jquery, I understand the validation how how to validate a
> > form using the plug in, and I am comfortable with the ajax request and
> > how to show and hide layers. I am in the tricky place where I cant get
> > the two to work together!
>
> > <script language="javascript">
> > $(document).ready(function()
> > {
>
> >  $("#login_form").validate({
> >  rules: {
> >    namea: "required",
>
> >    town: "required",
>
> >    emaila: {
> >      required: true,
> >      email: true
> >    }
>
> >  }
>
> > });
>
> >  $("#login_form").submit(function()
> >  {
> >  $.post("login.php",{ name:$('#namea').val(),password:$
> > ('#password').val(),rand:Math.random() } ,function(data)
> >        {
> >    if(data=='OK')
> >    {
> >       $('#loginbox').hide();
> >        $('#ajax_failed').hide();
> >   $('#ajax_show').show();
> >   $('#RegisterForm').show();
>
> >    }
> >    else
> >    {
> >  $('#name').val("");
> >      $('#ajax_failed').show();
> >          }
>
> >        });
> >   return false;
> >  });
> >  $("#password").blur(function()
> >  {
> >  $("#login_form").trigger('submit');
> >  });
> > });
> > </script>
>
> > If anyone could point me in the right direction or show me how to
> > achieve this I would be most grateful.
>
> > JW- Hide quoted text -
>
> - Show quoted text -