• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 156
  • Last Modified:

How do I validate form values without even submitting?

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
  • 2
2 Solutions
b0lsc0ttIT ManagerCommented:

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.

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.
b0lsc0ttIT ManagerCommented:
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.

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() {

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();">

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now