Home/ Questions/Q 9003275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:41:30+00:00

I’ve created a pretty straight-forward site which loads all of its content via jquery

  • 0

I’ve created a pretty straight-forward site which loads all of its content via jquery .load() functions when you click the navigation links, and it works great. What I want now is to load in an email contact form with AJAX-style validation that alert the user about invalid input fields prior to running the php submission.

In other words, user clicks navigation link for “contact me” and a form is loaded into the content div. If the user enters an invalid name or email and hits submit, appropriate error messages will appear next to those input fields. I don’t really care what happens after form goes through, whether it be a popup window or redirect page.

I’ve been trying to figure this out for weeks and I’m ready to give up. The form loads fine, but I can’t figure out the basic construct for getting an AJAX loaded form to respond to the user without reloading the page and clearing their fields. I even got the php form submission part working exactly how I want, but getting client-side scripts to function with server-side php functions just seems arduous.

Is this even possible? How should I go about this? What are the basic concepts and tools for something like this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I got my form to work using the jquery validation plugin! Thanks to Praveen for suggesting it. It’s a great tool.

    The underlying issue was that I really wasn’t wrapping my head around .load(). Once I utilized the .load() callback function, the validation ran fine. I created an external javascript file called contact.js which contains the validation plugin rules and submitHandler nested within contactPageScript() function. I called contactPageScript() with the .load() callback and voila:

    <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/contact.js"></script>

<script>
  $(document).ready(function(){
    $("div#menu ul li a").click(function() {
      var whichPage = $(this).attr('href');
      $('div#page_content').load(($(this).attr('href') + ' #contentB'), function(){
                    if (whichPage == 'contact.html') {
                        contactPageScript();
                    }}
      );
    });
  });
</script>
</head>

    The validation script of course also worked fine nested within the callback function rather than as an external .js, but it was too lengthy for my tastes. And there were some small details to be worked out regarding the validation rules. Here’s the chunk of validation code I used just for reference:

    $(document).ready(function() {
  $('#mailform').validate( { 
    rules: {
      fullname: {
        required: true,
        minlength:2
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      fullname: 'Please enter a valid name',
      email: 'Please enter a valid email address'
    },
    submitHandler: function(form) {
       $.post('php/submitForm.php', $('#mailform').serialize(), function() { DO STUFF });
    }
  });
});

    At first I couldn’t get the plugin script to work during debugging. Beware of extra commas after the rules! And also be advised that some copypasta tutorials contain hidden invalid characters within them! You’d never know! I had to rewrite the whole code by hand to get it to validate!

    I later added nested if/else statements within the callback to call functions for all the other pages on the site which required jquery/javascript. At first I tried using a switch instead of nested if/elses, but it was not ideal. It helps to read the manual!

    Cheers.

    • 0