Solved

How do I validate form values without even submitting?

Posted on 2006-11-08
6
146 Views
Last Modified: 2008-03-17
I'm trying to create checkpoints in my form. So when they click an image in the middle of the form, a new input will be visible. How do I make an onclick event on that image to validate a current selected option on the form, without submitting the form at all? Thanks for the help
0
Comment
Question by:bemara57
  • 2
6 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 250 total points
ID: 17902935
bemara57,

Your details are a little vague but you can probably do what you want just using a function that the onclick event will fire.  I will assume that the option that needs validating isn't the one clicked.  Make sure the option to be validated has an id attribute assigned.  I will assume it is option1 for my sample.

function validate() {
  if (document.getElementById("option1").value != "rightvalue") {
    alert("Please enter the right value!");
  }
  return false;
}

This should at least get you started or give you a basic idea.  Please provide details like code, etc if you want something more specific.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 6

Expert Comment

by:aescnt
ID: 17903821
I think the best way to put this validate() function is on the form's onsubmit.

<form onsubmit="validate()"> ... </form>

And have the validate() function return the right values. Returning 'false' should stop the submitting process, and 'true' will make it continue.
(Modifying b0lsc0tt's code here)

function validate() {
  if (document.getElementById("option1").value != "") {
    alert("Please enter something for option1."); return false;
  }
  // put more if checks here if necessary.
  return true;
}

Go to your favorite search angine and search for Javascript Form Validation, there should be many more resources available for you.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17903864
Actually if you need help with that type of validation I can help with that too.  Experts on this site are a great resource.  However since you said that you wanted to validate WITHOUT submitting then I didn't mention the onsubmit event or other options.  Let me know if I misunderstood.

bol
0
 
LVL 6

Assisted Solution

by:sodalitas
sodalitas earned 250 total points
ID: 17906703
If you have sections of your page, and you want to be able to validate the various sections without submitting, you could add a function for each section such as

function validateSection1() {
   //validate the first x controls here
}

funciton validateSection2() {
  //validate the second y controls here
}

function validateSection3() {
  //validate the rest of the controls here
}

function validateAll() {
  validateSection1();
  validateSection2();
  validateSection3();
}

Then you can have a checkpoint control/image/etc. after each section, where they would be of the format

<input type="Button" id="Checkpoint1" onclick="javascript:validateSection1();" value="Validate" />

And the form's submit would validate all

<form id="myForm" action="urlofnextpage" method="POST" onsubmit="javascript:validateAll();">

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now