Jump to content

How can I validate a form without having to reload the page?


TeddyKiller

Recommended Posts

Teddy, that is what my post is all about :) Depending on what you need validated, you can do it with a simple javascript function (checkForm()) or you'll need to do a few extra steps which WILL involve reloading the page.

 

I'll show you how I did mine:

 

on the form page, include this between the  <head> and </head> tags:

 

include("checkForm.php");

 

now create a new file called checkForm.php

 

My example won't work for you unless you're using the exact same form as me, but you'll get the meaning:

 

<script language="JavaScript">
function checkForm()
{
   var cusername, cpassword, cpassword2, cemail;
   with(window.document.msgform)
   {
      cusername = username;
  cpassword = password;
  cpassword2 = password2;
  cemail = email;
   }

   if(cusername.value == '')
   {
      alert('Please enter a user name!');
      cusername.focus();
      return false;
   }
   if(cusername.value.length < 4)
    {
  alert('User Name must be at least 4 characters');
  cusername.focus();
  return false;
}
   if (cpassword.value == '')
    {
  alert('Please enter a password!');
  cpassword.focus();
  return false;
}
   if (cpassword.value.length < 6)
    {
  alert('Password must contain at least 6 characters');
  cpassword.focus();
  return false;
}
   if (cpassword2.value == '')
    {
  alert('Please confirm your password!');
  cpassword2.focus();
  return false;
}
   if (cemail.value == '')
    {
  alert('You must use a valid email address.');
  cemail.focus();
  return false;
}
    if (cpassword.value != cpassword2.value)
 {
  alert('Your passwords did not match.');
  cpassword.focus();
  return false;
 }
  }
</script>

 

Now, for the form itself, you need to pay attention to three things... the form must have the name msgform, each input must also have id= as well as name= and the submit button must also contain onclick="return checkForm();" in it.

 

For my example above, you'll find 4 form entities:

username

password

password2

email

 

so for one of those, the form would look like this:

User Name: <input type=text size=20 id=username name=username>

 

and so on, so forth.

 

 

Link to comment
Share on other sites

You can't effectively validate a form using only client-side scripts, or rather you should never rely on on it. You should always make sure you validate server side, especially before any kind of database operations with the user-supplied data.

Link to comment
Share on other sites

I'm not good with javascript, so I have no idea, all I know is that this doesn't refresh the page as it is, it simply pops up a warning each time the user tries to submit the form with incorrect data... after it's submitted, that's another story. That is where you can start to do real checks using php, like if the username already exists, if the email exists ...etc, and if they do, have them resubmit a correct username. That is what I was just getting help in in my other post (check it out, solved, just a few below this post).

Link to comment
Share on other sites

Highly doubtful. The only option in that case may be to pass the values to a PHP script for validation, and if it fails, reopen the modal window, but I truly don't know enough about javascript to say for sure. I'm glad you bring that up though; I have a website I'm thinking about using a modal window on to gather some additional user information. I guess it's time to start doing some research . . . :)

Link to comment
Share on other sites

Yeah. I use the facebox modal window. I can display user info on it, but not too sure if it'll take form submitting.

I guess the option could be.. using the form action as another page.

Process it through there, then redirect you back to the page you were last on.

- Now this might come back as the modal page, or it can come back to the page behind the modal

 

I know using the form action as .. php_self, or just blank. Will reload the current page in which the modal window has got displayed on. Hence why it's unable to use it. So I can try out the redirecting method.. then I can repost in here and see if it does the job.

Link to comment
Share on other sites

Well, no matter what, server side validation should be done.  Always code defensively, which in this case means prepare for the worst case scenario.  Client side scripting is incredibly easy for someone with bad intent to avoid.  All they need to do is turn off their JavaScript, or view your source code and create their own form with similar inputs to submit to your form handler.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.